Info-Bulle en Javascript
Je vais vous présenter un script Javascript qui va vous permettre de faire apparaître des bulles d’informations sur n’importe quel élément HTML de votre page.
Pour faire ce type de script, il faut :
- détecter la position du curseur de la souris,
- permettre d’afficher et de cacher la bulle,
- permettre d’afficher un texte dans la bulle,
- un CSS pour le style,
- un div vide (qui servira de bulle).
Préambule
La grosse difficulté se situe au niveau de la détection de position du curseur, en effet tous les navigateurs ne respectent pas les même normes et, comme on peut s’en douter, un bug d’Internet Explorer vient nous mettre des bâtons dans les roues.
Lors d’un scroll de page, la position du curseur donné par Javascript n’est pas mise à jour, la position donné correspond alors bien à la souris, mais pas à la page scrollé.
Pour contrer ce problème, une solution, détecter le navigateur et ajouter ces fonctions propriétaires :
scrollLeft et scrollTop.
Pour afficher et cacher la bulle, on va utiliser les deux évènements onmouseout et onmouseover tout simplement, chacun appelant une fonction différente.
Pour le texte de la bulle, il faut trouver un moyen pour que l’élément HTML avec bulle transmette le texte au moment ou nous voulons afficher la bulle. Il faut aussi qu’a cette instant, le texte s’y écrive instantanément. Pour cela, nous allons passer le texte de cette manière :
onmouseover="montre(’TEXTE’) ;"
Le code
Lisez bien les commentaires qui sont très utile à la compréhension du code.
- <script language="javascript" type="text/javascript">
- <!--
- function GetId(id)
- {
- return document.getElementById(id);
- }
- var i=false; // La variable i nous dit si la bulle est visible ou non
- function move(e) {
- if(i) { // Si la bulle est visible, on calcul en temps reel sa position ideale
- if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
- GetId("curseur").style.left=e.pageX + 5+"px";
- GetId("curseur").style.top=e.pageY + 10+"px";
- }
- else { // Modif proposé par TeDeum, merci à lui
- if(document.documentElement.clientWidth>0) {
- GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
- GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
- } else {
- GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
- GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
- }
- }
- }
- }
- function montre(text) {
- if(i==false) {
- GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
- GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html
- i=true;
- }
- }
- function cache() {
- if(i==true) {
- GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
- i=false;
- }
- }
- document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position de la bulle.
- //-->
- </script>
Voilà pour le Javascript, une explication s’impose !
- GetId() : Un simple raccourci de programmeur fainéant (non en réalité, ça aide beaucoup pour la maintenance et la propreté du code)
- move(e) : Notre détecteur de mouvement
Cette fonction s’occupe de placer un élément "curseur" à la position de la souris. Il y a aussi une détection du navigateur, en l’occurrence, Internet Explorer, pour qui nous avions un bug à résoudre 
- montre(text) : Cette ci se charge de montrer la bulle (comme son nom l’indique), rien de sorcier si ce n’est le paramètre text. Le contenu de ce paramètre est placé dans la bulle, on peu y mettre tout ce que l’on veut (image, texte, iframe, vidéo, belle mère...).
- cache() : L’inverse de montre(), on cache la bulle.
Les fioritures
Vous aurez beau copier coller le Javascript dans votre page, il ne se passera jamais rien sans quelques éléments de bases :
- Un div vide nommé "curseur" (ou ce que vous voulez du moment que vous modifiez le code en conséquence) :
- <div id="curseur" class="infobulle"></div>
Ce div c’est notre bulle, il va donc falloir lui donner le look d’une bulle :P
- Le CSS de base :
- .infobulle{
- position: absolute;
- visibility : hidden;
- border: 1px solid Black;
- padding: 10px;
- font-family: Verdana, Arial;
- font-size: 10px;
- background-color: #FFFFCC;
- }
Rien de sorcier, a part le position:absolute qu’il ne faut absolument pas modifier.
- Un élément HTML quelconque qui appelle nos fonctions pour afficher la bulle !! Bah oui c’est évident
- <p onmouseover="montre('Ici je met tout le texte que je veut, <b>meme de l\'html</b> !');" onmouseout="cache();">Un paragraphe avec une info bulle !</p>
On utilise les évènements onmouseout et onmouseover sur l’élément de notre choix, pour appeler nos fonctions montre() et cache(). Le contenu de la bulle est passé en paramètre à montre().
Et si on testait la bête ?
Cliquez ici pour tester le script d’info bulle Javascript.
On touche au but, je vous invite à regarder la source de la page de demo pour voir l’ensemble,
c’est vraiment simple et facilement personnalisable.
Alors vite fait, comme ça marche
- Collez dans votre page le CSS, le Javascript et le div.
- Mettez les onmouseout et onmouseover sur un élément, comme ceci :
onmouseover="montre(’SuperGeek revient !’) ;" onmouseout="cache() ;" - Attention à ne pas mettre de " et à échapper les ’ avec un antislashe. Sinon vous allez tout planter le truc.
- Vous pouvez mettre tout ce que vous voulez dans la bulle, vraiment tout.
Améliorations possibles
Au menu des trucs que vous pouvez faire on trouve :
- Un design plus cool
- Baisser l’opacité, il suffit d’ajouter :
opacity : 0.5 ;
-moz-opacity : 0.5 ;
-khtml-opacity : 0.5 ;
filter : alpha(opacity=50) ;
(Il y a quatre opérations à faire pour que ça marche sur tous les navigateurs) - Mettre une tempo à l’apparition
- Faire apparaître la bulle en fondu
- Convertir le script en jQuery (facile, je le ferais peut être).
RSS 2.0
