JavaScript - Infobulle dynamique 2
Auteur : 3L!X | Créé le : 01/11/2007 à 13H00
Une Infobulle dynamique qui suit le curseur de la souris, avec un effet de transparence.
Voir l'exemple d'infobulle !
Pour utiliser cet exemple, veuillez télécharger le fichier "infobulle2.rar" puis le décompresser.
|
5 fichiers seront extraits :
- infobulle2.html
- infobulle2.js
- infobulle2.css
- bulle.gif
- wink.gif
|
Mise en place
Entre les balises <HEAD> et </HEAD> :
<script type="text/javascript" src="infobulle2.js"></script>
Balise <BODY> :
Rien
Entre les balises <BODY> et </BODY> :
<span onmouseover="open_bulle('Une <strong>Infobulle</strong> qui suit le curseur de la souris.<br />
<br />Voila c\'est beau non? <img src=\'wink.gif\' alt=\'\' />');"
onmouseout="close_bulle();" class="link_bulle">Passez la souris ici !</span>
(4) commentaires - Voir/Editer
Posté le 17/12/2007 à 11h10, par Xavier DusartLe positionnement initial de la bulle est incorrect, ce qui ne se voit que si on ne bouge pas la souris après son activation.
Pour corriger cela, on ajoute un appel à move_bulle dans open_bulle :
function open_bulle(content)
{
if(i==false){
ElementId("bulle").style.visibility = "visible"; // Si la bulle est cacher on la rend visible.
ElementId("bulle_bas").innerHTML = content; // on copie le contenu dans la bulle
i=true;
move_bulle(ElementId("bulle")); // positionnement initial (correctif X.Dusart)
}
}
Posté le 17/12/2007 à 11h13, par Xavier DusartDans une page avec frame, le positionnement est incorrect (sous IE 7). Au lieu de document.body, utiliser document.documentElement :
function move_bulle(e) // Fonction de suivi de la souris
{
if(i){
if(navigator.appName!="Microsoft Internet Explorer"){
ElementId("bulle").style.left = (-200)+e.pageX+"px";
ElementId("bulle").style.top = 15+e.pageY+"px";
}else{
ElementId("bulle").style.left = (-200)+event.x+document.documentElement.scrollLeft+"px";
ElementId("bulle").style.top = 15+event.y+document.documentElement.scrollTop+"px";
}
}
} Posté le 17/12/2007 à 11h14, par Xavier DusartMerci beaucoup pour ce script, très bien fait au demeurant. Posté le 17/12/2007 à 22h42, par 3L!XMerci pour ces remarques très pertinentes.
Nous avons pris en compte vos modifications.
Cordialement
Poster un commentaire
|