// La variable à utiliser pour ajouter un ToolTip à un élément var toolTipGest = new ToolTipGest(); // Le délai entre chaque diminution de l'opacité du ToolTip var tempoOpacite = 0.5; // La valeur de l'opacité actuelle du ToolTip var opacite = 0; // Timer permettant de modifier l'opacité du ToolTip var timerOpacite = null; // CLASSE SERVANT À STOCKER LES MESSAGES DES TOOLTIPS function ToolTipGest() { // Indique la méthode à afficher lorsque la souris se déplace document.onmousemove = SetToolTip; // Tableau contenant les structures 'ToolTip' this.tabToolTips = new Array; this.indiceActif = 0; // Méthode permettant d'ajouter un toolTip sur un élément this.Add = Add_ToolTip; } // MÉTHODE PERMETTANT D'AJOUTER UN TOOLTIP À UN ÉLÉMENT DE LA PAGE function Add_ToolTip( idElement, message ) { // Recherche le prochain emplacement libre var indice = 0; while( this.tabToolTips[ indice ] != null ) indice ++; // Crée puis stocke la structure ToolTip pour l'élément this.tabToolTips[ indice ] = new ToolTip( idElement, message ); } // STRUCTURE SERVANT À STOCKER L'ID DE L'ÉLÉMENT SUR LEQUEL LE TOOLTIP AGIT, AINSI QUE LE MESSAGE À AFFICHER function ToolTip( idElement, message ) { // Mémorise l'id de l'élément et le texte du toolTip associé this.idElement = idElement; this.message = message; // Affiche le ToolTip et y met le message if( GetElement( "BORD_ToolTip" ) == null ) return; // Récupère l'élément représentant le toolTip var bordToolTip = GetElement( "BORD_ToolTip" ); // Affiche l'élément bordToolTip.style.display = "inline"; bordToolTip.style.position = "absolute"; bordToolTip.style.left = 0; bordToolTip.style.top = 0; // Change le texte du toolTip GetElement( "TEXT_ToolTip" ).innerHTML = message; // Récupère les dimensions du ToolTip this.longueur = GetElement( "BORD_ToolTip" ).offsetWidth; this.hauteur = GetElement( "BORD_ToolTip" ).offsetHeight; // Efface le ToolTip GetElement( "BORD_ToolTip" ).style.display = "none"; } // FONCTION PERMETTANT D'AFFICHER PROGRESSIVEMENT LE TOOLTIP function ShowToolTip() { // Affiche le ToolTip if( GetElement( "BORD_ToolTip" ).style.display == "none" ) GetElement( "BORD_ToolTip" ).style.display = "inline"; // Le ToolTip est en train de s'effacer if( timerOpacite != null ) // Annule le timer clearTimeout( timerOpacite ) // Le navigateur est IE if( document.all ) { // Augmente l'opacité du ToolTip opacite += 5; GetElement( "BORD_ToolTip" ).style.filter = "alpha( opacity = " + opacite + " )"; // Le ToolTip n'est pas entièrement opaque if( opacite < 100 ) timerOpacite = setTimeout( "ShowToolTip()", tempoOpacite ); } // Le navigateur est Netscape else { // Augmente l'opacité du ToolTip GetElement( "BORD_ToolTip" ).style.opacity = opacite; opacite += 0.05; // Le ToolTip n'est pas entièrement opaque if( opacite < 1 ) timerOpacite = setTimeout( "ShowToolTip()", tempoOpacite ); } } // FONCTION PERMETTANT D'EFFACER PROGRESSIVEMENT LE TOOLTIP function HideToolTip() { // Vérifie que le ToolTip n'est pas déjà en train de s'effacer if( timerOpacite != null ) clearTimeout( timerOpacite ) // Le navigateur est IE if( document.all ) { // Diminue l'opacité du ToolTip opacite -= 5; GetElement( "BORD_ToolTip" ).style.filter = "alpha( opacity = " + opacite + " )"; } // Le navigateur est Mozilla else { // Diminue l'opacité du ToolTip GetElement( "BORD_ToolTip" ).style.opacity = opacite; opacite -= 0.05; } // Vérifie s'il faut continuer if( opacite > 0 ) timerOpacite = setTimeout( "HideToolTip()", tempoOpacite ); else GetElement( "BORD_ToolTip" ).style.display = "none"; } // FONCTION PERMETTANT DE DÉTECTER QUAND LE CURSEUR SE TROUVE AU-DESSUS D'UN ÉLÉMENT AYANT UN TOOLTIP function SetToolTip( evenementSouris ) { if( GetElement( "BORD_ToolTip" ) == null ) return; // Récupère les coordonnées de la souris en fonction du navigateur var souris_X; var souris_Y; if( document.all ) { souris_X = event.clientX; souris_Y = event.clientY; } else { souris_X = evenementSouris.clientX; souris_Y = evenementSouris.clientY; } // Ajoute la valeur des barres de défilement souris_X += document.body.scrollLeft; souris_Y += document.body.scrollTop; // Parcourt les éléments ayant un ToolTip var indice = 0; var isVisible = false; while( toolTipGest.tabToolTips[ indice ] != null ) { // Récupère l'élément var element = GetElement( toolTipGest.tabToolTips[ indice ].idElement ); // Récupère les coordonnées de l'élément var elementPosLeft = element.offsetLeft; var elementPosTop = element.offsetTop; // Pour un navigateur IE et si l'élément est dans un conteneur if( document.all && element.parentElement != document.body ) { // Parcourt les conteneurs de l'élément var bufferElement = element; while( bufferElement.parentElement != document.body ) { // Ajoute les coordonnées du conteneur courant elementPosLeft += bufferElement.parentElement.offsetLeft; elementPosTop += bufferElement.parentElement.offsetTop; // Passe au conteneur suivant bufferElement = bufferElement.parentElement; } } else if( element.parentNode != document.body ) { // Parcourt les conteneurs de l'élément var bufferElement = element; while( bufferElement.parentNode != document.body ) { // Ajoute les coordonnées du conteneur courant elementPosLeft += bufferElement.parentNode.offsetLeft; elementPosTop += bufferElement.parentNode.offsetTop; // Passe au conteneur suivant bufferElement = bufferElement.parentNode; } } // Vérifie si le curseur est au-dessus de l'élément if( souris_X > elementPosLeft && souris_X < elementPosLeft + element.offsetWidth && souris_Y > elementPosTop && souris_Y < elementPosTop + element.offsetHeight ) { // Met le message, correspondant à l'élément ayant le focus, dans le ToolTip if( GetElement( "TEXT_ToolTip" ).innerHTML != toolTipGest.tabToolTips[ indice ].message ) { GetElement( "TEXT_ToolTip" ).innerHTML = toolTipGest.tabToolTips[ indice ].message; GetElement( "BORD_ToolTip" ).width = toolTipGest.tabToolTips[ indice ].longueur; GetElement( "BORD_ToolTip" ).height = toolTipGest.tabToolTips[ indice ].hauteur; } // Affiche le ToolTip ShowToolTip(); // Indique l'indice du ToolTip actif toolTipGest.indiceActif = indice; // Indique que le ToolTip doit rester visible isVisible = true; // Arrête de parcourir les éléments break; } //Passe à l'élément suivant indice ++; } // Le ToolTip ne doit pas être visible if( ! isVisible ) HideToolTip(); // Le tableau contient un message pour cet élément if( toolTipGest.tabToolTips[ toolTipGest.indiceActif ] != null ) { // Récupère les coordonnées de l'écran var ecranX = document.body.clientWidth + document.body.scrollLeft; var ecranY = document.body.clientHeight + document.body.scrollTop; // Vérifie si le ToolTip sort de la page par la droite if( souris_X + 10 + toolTipGest.tabToolTips[ toolTipGest.indiceActif ].longueur > ecranX ) GetElement( "BORD_ToolTip" ).style.left = ecranX - toolTipGest.tabToolTips[ toolTipGest.indiceActif ].longueur; else GetElement( "BORD_ToolTip" ).style.left = souris_X + 10; // Vérifie si le ToolTip sort de la page par le bas if( souris_Y + 15 + toolTipGest.tabToolTips[ toolTipGest.indiceActif ].hauteur > ecranY ) GetElement( "BORD_ToolTip" ).style.top = ecranY - toolTipGest.tabToolTips[ toolTipGest.indiceActif ].hauteur; else GetElement( "BORD_ToolTip" ).style.top = souris_Y + 15; } } // FONCTION PERMETTANT DE RÉCUPÉRER UN ÉLÉMENT DE LA PAGE function GetElement( idElement ) { if( document.all ) return document.all[ idElement ] else return document.getElementById( idElement ) }