je sais plus d'ou je le sors..mais moi j'ai ça
entre les balises <head>:
<style type="text/css">
#infobulle{
position: absolute;
visibility : hidden;
border: 1px solid #CCCCCC;
padding: 10px;
font-family: Verdana, Arial;
font-size: 0.7em;
background-color:#FFFFFF;
color:#339933;
}
</style>
<script type="text/javascript">
/*******************
* infobulles
* Ben, 23/07/2005
*******************/
// espacement entre le curseur et l'infobulle
cursor_padding = 5;
// gestion des navigateurs (IE, MOZ, NS)
nav = navigator.appName;
ie = document.all;
ns = document.layers;
fi = document.getElementById && !document.all;
if(!ie && !ns && !fi){
alert("navigateur "+nav+" incompatible !");
}
if(!ie){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = get_mouse;
// recupere les coordonnees de la souris
// les affecte au style de la div infobulle
function get_mouse(e){
if(ie){
x = event.x;
y = event.y;
window.status = x;
}else{
x = e.pageX;
y = e.pageY;
}
bubble = document.getElementById("infobulle");
bubble.style.left = x + cursor_padding;
bubble.style.top = y + cursor_padding;
}
// affiche la bubble
function see_bubble(text){
bubble.style.visibility = "visible";
bubble.style.display = "block";
// bubble.innerHTML = text;
// déconseillé pas aux normes
longueur_bubble = bubble.firstChild.length;
bubble.firstChild.replaceData(0, longueur_bubble, text);
}
// cache la bubble
function kill_bubble(){
bubble.style.visibility = "hidden";
bubble.style.display = "none";
}
</script>
dans le html :
<a href="#" onmouseover="javascript:see_bubble('le contenu de la bulle ');" onmouseout="javascript:kill_bubble();" class="liens_vert">le lien de la bulle</a>
a adapter ...
Modifié par camyo (03 Mar 2008 - 10:16)