AccueilDes infobulles étendues
Le 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';}
}
// 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;
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>
<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>
<a title="tooltip1" onmouseover="more('tooltip2', event);" onmouseout="less('tooltip2');">Tooltip sur un texte</a>