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.
Commentaires.
#1 par serge
Bonjour,
L'infobulle est superbe.
Ou puis je trouver le code js
le Mardi 23 Janvier 2007 à 15:04:21
#2 par Nyro
Tout le nécessaire est présenté dans le billet me semble-t-il
le Mardi 23 Janvier 2007 à 15:06:37
#3 par serge
Je suppose que le billet est le code js sur la page.
En fait je cherche comment est construite l'infobulle (son design).
Comment ce fait le lien sur l'info bulle, car je ne trouve pas de onmouseover.
Je suppose que c'est du css, mais je ne comprend pas le fonctionnement.
Merci, cordialement
Serge
le Mardi 23 Janvier 2007 à 15:47:09
#4 par Nyro
Ah tu parles de l'infobulle sur les liens externes ?
Ca, ce n'est pas moi qui l'ai fait, c'est un script externe.
J'en parle ici : www.nyrodev.info/index.ph...
le Mardi 23 Janvier 2007 à 23:16:57
#5 par alainl
Bonjour,
Je trouve le résultat superbe aussi, mais il y a un problème avec les ascenseurs sous IE6, la bulle n'est plus au niveau de la souris, mais beaucoup plus haut, à un tel point que sur des pages longues, on ne voit même plus la bulle.
le Samedi 14 Avril 2007 à 17:27:25
#6 par zoukozouko
Je n'arrive pas du tout à voir un exemple de cette infobulle.
J'ai manqué quelquechose?
le Vendredi 09 Janvier 2009 à 16:24:23
#7 par Nyro
zoukozouko, Je n'avais pas mis de lien vers un exemple d'utilisation de cette inforbulle.
Et là où je l'utilisais, le site a été mis à jour récemment.
Pour voir le résultat, il vous faudra donc le mettre en place vous-même
le Vendredi 09 Janvier 2009 à 16:33:10
#8 par zoukozouko
J'avais cru comprendre qu'il y avait des styles particuliers. C'est surtout cela qui m'interessait.
Si vous pouviez retouver le lien vers l feuille css, et la class à tuiliser pour le div de l'infobulle, ce serait super.
Merci
le Samedi 10 Janvier 2009 à 12:43:37
Ajouter un commentaire.