CrazyCat Programming Factory
rendre internet plus accessible
 

Des infobulles étendues

Logo javascriptLe système est composé de trois parties distinctes qui sont:
* Le javaScript qui gère l'affichage
* La CSS qui permet de définir les blocs d'information
* Le code HTML.

Le JavaScript


Son but est simplement de rendre visible ou invisible les infobulles, en ayant une compatibilité maximale.
Bien entendu, il faut aussi gérer l'emplacement de l'affichage.
function more(id, eventObj) {
   // Cette fonction va afficher l'infobulle
   var scrOfX = 0, scrOfY = 0;
   div = eval(document.getElementById(id));
   // On récupère les données sur le bloc à afficher
   // La suite permet de choisir l'endroit où l'on affiche (les méthodes sont différentes en fonction des navigateurs)
   if (typeof(window.pageYOffset) == 'number' ) {
      //Netscape compliant
      scrOfY = window.pageYOffset + 5;
      scrOfX = window.pageXOffset + 10;
   } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
      //DOM compliant
      scrOfY = document.body.scrollTop + 5;
      scrOfX = document.body.scrollLeft + 10;
   } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
      //IE6 standards compliant mode
      scrOfY = document.documentElement.scrollTop + 5;
      scrOfX = document.documentElement.scrollLeft + 10;
   }
   // Nous avons désormais les positions d'affichages
   if (div) {
      // L'id envoyée correspond bien à un bloc, on modifie son style
      div.style.left = (eventObj.clientX + scrOfX) + "px"; // Sa position horizontale
      div.style.top = (eventObj.clientY + scrOfY) + "px"; // Sa position verticale
      div.style.display = 'block'; // Passé en "block" le fait afficher
   }
}
function less(id) {
   // Cette fonction cache l'infobulle
   div = eval(document.getElementById(id));
   if (div) {div.style.display='none';}
}


La CSS


La définition CSS est très simple, nous créons un style "more".
.more {
   position: absolute;
   display: none;
   /* Ce qui suit n'est pas vraiment important pour le fonctionnement */
   top: 50%;
   left: 55%;
   background-color: #bbbbff;
   color: black;
   padding: 10px;
   text-align: left;
   font-style: italic;
   font-weight: normal;
   font-size: 80%;
}

position: absolute; est important pour nous car nous voulons que le javascript puisse positionner le bloc là où nous le décidons.
display: none; permet de cacher le bloc par défaut.

Le HTML


Le HTML comprend deux parties:
* la définition des blocs
* l'appel des blocs

La définition des blocs se fait très simplement:
<div id="tooltip1" class="more">Une info bulle</div>
<div id="tooltip2" class="more"><img src="image.jpg">Avec une image</div>

On peut mettre ce que l'on veut dans les blocs, il faut surtout faire attention à ce que les id soient uniques et bien leur appliquer la classe more.

L'appel se fait très simplement en utilisant les propriétés onmouseover et onmouseout des objets le supportant, pour ma part j'utilise fréquemment les liens:
<a title="tooltip1" onmouseover="more('tooltip1', event);" onmouseout="less('tooltip1');"><img src="./info.gif" /></a>
<a title="tooltip1" onmouseover="more('tooltip2', event);" onmouseout="less('tooltip2');">Tooltip sur un texte</a>


©2006-2017 Geek Zone | eggdrop.fr | zeolia.net