JavaScript : Faire une infobulle
by Nyro, Sunday 05 November 2006 at 04:31:35 PM :: Programmation
Pour un site en construction, j'ai du mettre en place une infobulle sur des images.
J'ai d'abord commencé par chercher à droite à gauche ce qui se faisait, pour voir si je ne pouvais pas trouver un script à réutiliser tout simplement.
Après bien des tests, aucun ne fonctionnait dans mon cas, dans un site tout en Div/CSS.
Donc, j'ai commencé par rechercher comment déplacer une div par rapport à la souris. J'ai trouvé ce dont j'avais besoin sur Tout Javascript. Enfin presque : le seul soucis de ce code, c'est qu'il ne tient pas compte des barres de défilement; autrement dit, si vous descendez dans votre page, votre 'infobulle' changera de place, mais en haut, et donc vous ne la verrez pas. Voici donc le code modifié :
function mouseMove (evt) {
var x = 0;
var y = 0;
var plusX = 0;
var plusY = 0;
if (document.layers) {
x = evt.x;
y = evt.y;
plusX = window.pageXOffset;
plusY = window.pageYOffset;
} else if (document.all) {
x = event.clientX;
y = event.clientY;
plusX = document.body.scrollLeft;
plusY = document.body.scrollTop;
} else if (document.getElementById) {
x = evt.clientX;
y = evt.clientY;
plusX = window.pageXOffset;
plusY = window.pageYOffset;
}
document.getElementById("popBox").style.left = (x+plusX+15)+"px";
document.getElementById("popBox").style.top = (y+plusY+5)+"px";
}
if (document.layers)
document.captureEvents(Event.MOUSEMOVE);
if (document.layers || document.all)
document.onmousemove = mouseMove;
if (document.addEventListener)
document.addEventListener('mousemove', mouseMove, true);
Vous l'aurez compris, j'ai placé juste derrière mon
une div vide avec comme id popBox, qui a comme attribut CSS position: absolute (et d'autres si vous en avez besoin...)C'est quasiment fini. En effet, j'ai à ma disposition une div qui suit la souris tout le temps. Il ne me reste plus qu'à la cacher par défaut, et à l'afficher au survol des éléments qui doivent avoir une infobulle, et à y insérer le contenu que je veux. Dans mon cas, il s'agissait d'afficher un zoom sur une image au survol de sa vignette. J'ai donc décider d'afficher cette image dans une div invisible; de cette façon, le chargement de l'image commence avant que la personne passe dessus l'image. Et lorsque je dois afficher le contenu, je copie simplement le contenu de la div cachée dans ma div popbox. Le code :
function montre(id) {
var elt = document.getElementById('popBox');
elt.style.display = "block";
elt.innerHTML = document.getElementById(id).innerHTML;
}
function cache() {
var elt = document.getElementById('popBox');
elt.style.display = "none";
}
La fonction montre est appellée sur le onMouseOver de l'image, avec en paramètre l'id de la div à recopier. La fonction cache est quant à elle appelée sur le onMouseOut de la même image.
Et voilà, une belle infobulle qui fonctionne super bien avec IE et FireFox.
8 comments :: 19 808 views