Info bulle non destructive

Soyez le premier à donner votre avis sur cette source.

Snippet vu 8 398 fois - Téléchargée 17 fois

Contenu du snippet

Bonjour,

Un petit code source permettant de faire des infos bulles personnalisés. Jusque là rien d'extraordinaire :).
Petites particularitées :
- ce code utilise getElementsByClassName pour savoir où agir (simplifie l'implantation)
- ce code est non intrusif (si javascript est à off, le site reste totalement explotable et les informations au survol de la souris restent accessible) il respecte donc l'accessibilité.
- pas de vilain onmouseover/onmouseout dans votre code HTML.
- l'info bulle suit la souris dans la zone réactive.

Source / Exemple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>Infos Bulle</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="generator" content="SCiTe" />
    <meta name="author" content="McPeter" />
    <style type="text/css">
    /* <![CDATA[ */
    #infoBull{
      position:absolute; z-index:100;
      padding:4px 10px;
      max-width:20em;
      border:2px groove silver;
      background-color:#FFFFCC;
      border:1px outset #D2D2D2;
    }
      .hide{ display:none; }
      .view{ display:block; }
      .viewBull{
        width:30em;
        border:1px solid black;
        cursor:help;
      }
    /* ]]> */
    </style>

    <script type="text/javascript">
    /* <![CDATA[ */

    var messag = new Array;
    var infoBull;

    // Pour IE qui capte jamais rien ...
    if (!document.getElementsByClassName){
      document.getElementsByClassName = function (cl) {
        var retnode = [];
        var myclass = new RegExp ('\\b'+cl+'\\b');
        var elem = this.getElementsByTagName ('*');
        for (var i = 0; i < elem.length; i++) {
          var classes = elem[i].className;
          if (myclass.test (classes)) retnode.push (elem[i]);
        }
        return retnode;
      }
    }

    // Identifie tous les élements devant afficher une infobulle via un nom de class (ici : viewBull)
    function catchBull(){
      var bullElement = document.getElementsByClassName ('viewBull');
      var bullElementNum = bullElement.length;
      for (var i=0; i<bullElementNum; i++) {
        // récupère le contenu de l'attribut title
        messag[i] = bullElement[i].getAttribute ('title')
        bullElement[i].removeAttribute ('title');
        bullElement[i].onmouseover = thisBullView (i,'view');
        bullElement[i].onmouseout = thisBullView (i,'hide');
      }
    }

    // Affiche ou cache la Bulle
    function thisBullView (i, show){
      return function(){
        infoBull.innerHTML=messag[i];
        infoBull.className=show;
      }
    }

    // Détection de la souris et positionnement de la Bulle
    function move(e){
      if(infoBull.className=='view') {  
        if (navigator.appName!="Microsoft Internet Explorer") {
          infoBull.style.left=e.pageX+5+'px';
          infoBull.style.top=e.pageY+10+'px';
        }else{
          if(document.documentElement.clientWidth>0){
            infoBull.style.left=20+event.x+document.documentElement.scrollLeft+'px';
            infoBull.style.top=10+event.y+document.documentElement.scrollTop+'px';
          } else {
            infoBull.style.left=20+event.x+document.body.scrollLeft+'px';
            infoBull.style.top=10+event.y+document.body.scrollTop+'px';
          }
        }
      }
    }

    // Chargement du script
    window.onload=function(){
      infoBull = document.getElementById('infoBull');
      catchBull();
      document.onmousemove=move;
    }
    /* ]]> */
    </script>

  </head>

  <body>

    <h1>Bulle d'aide sur className <small>(IE7-8 / FF)</small></h1>

    <h2>JavaScript non intrusif !</h2>

    <p>
      - Bulle d'aide personnalisée utilisant l'attribut "title".<br />
      - La bulle d'aide suit la souris sur les zones réactives.
    </p>

    <p class="viewBull" title="texte zone 1">
      zone 1<br />
    </p>

    <p class="viewBull" title="texte zone 3">
      zone 3
    </p>

    <p class="viewBull" title="texte zone 6">
      zone 6<br />
      <br />
      <br />
    </p>

    <p class="viewBull" title="texte zone 2">
      zone 2
    </p>

    <p class="viewBull" title="texte zone 4">
      zone 4<br />
      <br />
    </p>

    <div class="viewBull" title="Il peut être parfois utile de récupérer un élément DOM par le nom de sa classe CSS. Nativement, la méthode getElementsByClassName n'est pas implémentée. Quel dommage...">
      <p>
        blablabalbalblabab bl balbbalball blb lalabl bababl ab alb aal bl abalblbablb lbalb <br />
        bablablablabbablab lblb ablab abl bla lablabal blabalb lblab lala ba llab labbl <br />
        lablbabal blabl bblablabl bablba babla labl bab labla bb abal balbl abal blablab blaba bb al<br />
        balblaba blababa bababl blab l<br />
      </p>

    </div>

    <!-- Bulle d'aide -->
    <div id="infoBull" class="hide"></div>

  </body>
</html>

Conclusion :


Vous pouvez voir à quoi ça ressemble sur : http://dev.blinckers-groups.com/scriptJS/infos_bulles_ver_2.html

Vous devez lire "infos_bulles_ver" et non "infos_bul les_ver" (la coupure se fait lors du post de la conclusion :'(

A voir également

Ajouter un commentaire

Commentaires

jdmcreator
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
4
Utilisation de la classe pour gérer les éléments... j'aime bien :)

Mais sache que sur les nouveaux navigateurs, document.getElementsByClassName est déjà implanté. Peut-être testé la fonction avant afin d'éviter de faire travailler pour rien le navigateur.

Quelque chose du genre :

if(!document.getElementsByClassName){}

Mais je ne suis pas sûr si cela fonctionne ^^

En tout cas, un peu simpliste mais bon travail tout de même =)
cs_Kimjoa
Messages postés
264
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014

la remarque de jdmcreator est tout à fait juste, faut d'abord testé l'existence de la fonction.
Sinon je suis pas sur que d'utilisé title soit le plus pertinent. Beaucoup de script d'info-bulle l'utilise, mais pour y mettre du html, c'est galère faut tout protéger.
Pourquoi ne pas réutiliser getElementsByClassName pour récupérer les info-bulles?
McPeter
Messages postés
136
Date d'inscription
mercredi 22 janvier 2003
Statut
Membre
Dernière intervention
18 avril 2013

jdmcreator <-- merci pour la suggestion de tester si getElementsByClassName est implanté ou non (au départ je ne l'ai ajouté que pour IE)
Kimjoa <-- je crois que tu n'as pas du tout compris mon code :)
cs_Kimjoa
Messages postés
264
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014

bah si j'ai compris :)
C'est juste que de généré le contenue des info-bulle via l'attribut title c'est pas super pratique, surtout si on veux mettre du HTML.
Sinon getElementsByClassName servirait pas a grand chose, mais peux-être utiliser des suffix au id .....
McPeter
Messages postés
136
Date d'inscription
mercredi 22 janvier 2003
Statut
Membre
Dernière intervention
18 avril 2013

Kimjoa ben non :P
je m'explique ;o) :
tu dis : "Pourquoi ne pas réutiliser getElementsByClassName pour récupérer les info-bulles?" <-- c'est exactement ce que fait mon code.
"Sinon je suis pas sur que d'utilisé title soit le plus pertinent. " <-- ça évite de "casser" l'html "normal" .... si un non-voyant vient sur le site ... comment tu lui passes tes infos bulles ? ... là le but n'est pas de mettre de l'html dans des infos bulle... mais de "styler l'info bulle" ... Tu me diras : "dans ce cas pourquoi ne pas laissser faire l'attribut title ?" <-- parceque justement mon code est pour décorer une info bulle (celle par défaut étant à la fois relativement lente de réaction et aussi pas très "jolie") là ce qu'il se passe c'est que le code HTML n'est pas détruit dans sa sémantique. Le fait aussi qu'en cas de javascript désactiévé, les informations restent. d'où le titre : INFO-BULLE-NON-DESTRUCTIVE.
"...mais peux-être utiliser des suffix au id ....." <-- justement en utilisant un getElementsByClassName, celà évite de se torturer la tête à attribuer des id (donc >Unique<) là simplement si on veut utiliser l'infobulle personnalisé, il suffit d'appliquer une class ... .
Enfin voilà quoi :)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.