//INFOBULLE :
####################
//le code JS ( necessite JQUERY )
function Bulle(){
//recuperation des coordonnées du curseur
if (navigator.appName == "Microsoft Internet Explorer") { //si l'user est sous IE (bouh IE c'est null)
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
else {
evt = window.event;
x = evt.clientX;
y = evt.clientY;
}
//positionnement de l'infobulle par rapport au curseur
$(".infobulle").css("left", x+"px");
$(".infobulle").css("top", y+30+"px");
$(".infobulle").html("texte de l'infobulle"); //ecrit le texte dans l'infobulle (on peut recuperer la valeur d'attribut d'une balise pour alimenter le texte )
$(".infobulle").show(); //l'affiche
}
function BulleOff(){
$(".infobulle").hide(); //cache l'infobulle
}
##################
//le code html
//on à juste besoin d'un div placé n'importe ou dans notre page (à la fin c'est pas mal, ça peut faire eviter des problèmes de z-index)
<div class="infobulle" style="position: absolute; padding: 5px; background: #fee; font-size: 0.8em;"></div> //avec un peu de CSS pour stylé l'infobulle
//et bien sur les appels des js
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script> //JQUERY
<script type="text/javascript" src="scripts/mon_script.js"></script> //fichiers dans le lequel vous aurez collez le code JS ci-dessus
library
html (48)