// Récupère les coordonnées de la souris, // les affecte au style de la div infobulle pour qu'elle suive les déplacements. /* // Pages de références : // Scripts d'infobulle. http://www.javascriptfr.com/tutoriaux/POSITION-SOURIS-DANS-PAGE_478.aspx http://www.javascriptfr.com/forum/sujet-IMAGE-APPARAIT-SURVOL-LIEN_879570.aspx http://damienalexandre.fr/Info-Bulle-en-Javascript.html // Propriétés. https://developer.mozilla.org/fr/DOM/event // Position de l'évènement, relative au calque courant (Fx). http://msdn.microsoft.com/en-us/library/ms535154(VS.85).aspx // Position par rapport à l'élément parent courant (IE). // Position glogale d'un élément. http://forum.alsacreations.com/topic-5-38724-1-Calculer-la-position-dun-element-en-javascript.html http://www.quirksmode.org/js/findpos.html // Largeur d'un navigateur. http://fr.selfhtml.org/javascript/exemples/surveillance_taille_fenetre.htm */ //***************************************************************************************/ // Récupère l'élément en fonction de l'id. function getElement(sId) { if (!document.getElementById) { return; } else { return document.getElementById(sId); } } //***************************************************************************************/ // Renvoie la position globale en x et y d'un élément par rapport au navigateur. function getPositionGlobal(obj) { if (!obj) { var iCursorLeft = 0; var iCursorTop = 0; } else { if (obj.offsetParent) { iCursorLeft = obj.offsetLeft; iCursorTop = obj.offsetTop; while (obj = obj.offsetParent) { iCursorLeft += obj.offsetLeft; iCursorTop += obj.offsetTop; } } } return [iCursorLeft, iCursorTop]; } //***************************************************************************************/ // Retourne la largeur du contenu visible dans le navigateur. function getWidthBrowser() { var iWidth; if (window.innerWidth) { iWidth = window.innerWidth; } else if (document.body && document.body.offsetWidth) { iWidth = document.body.offsetWidth; } else { iWidth = 0; } return iWidth; } //***************************************************************************************/ // Retourne la hauteur du contenu visible dans le navigateur. function getHeightBrowser() { var iHeight; if (window.innerHeight) { iHeight = window.innerHeight; } else if (document.body && document.body.offsetHeight) { iHeight = document.body.offsetHeight; } else { iHeight = 0; } return iHeight; } //***************************************************************************************/ // L'argument 'e' n'est passé à la fonction que par les navigateur n'ayant pas // implémenté "event" comme objet, IE possède son propre objet bien connu "event". function getMouse(e) { // var iPosX = 0; var iPosY = 0; // L'objet

que l'on va déplacer. var objBubble = getElement('infobulle'); if ( !objBubble ) { return; } // Comme la page est structurée différemment (CSS), il y a un décalage correspondant à la position de

. // Récupération du décalage (si l'élément n'existe pas, on l'initialise à 0). var objDivPrincipal = getElement('principal'); var iPosXGlobal = 0; var iPosYGlobal = 0; if (objDivPrincipal) { var arrayPos = getPositionGlobal(objDivPrincipal); iPosXGlobal = arrayPos[0]; iPosYGlobal = arrayPos[1]; } // Décalage voulu de l'infobulle avec le curseur. var iCursorPaddingX = -8; var iCursorPaddingY = 35; // La position finale du curseur. var iPosXFinal; var iPosYFinal; // Il faut traiter le CAS des DOCTYPE sous IE / Opera. var docRef; if (document.documentElement && document.documentElement.clientWidth) { docRef = document.documentElement; } // Dans ce cas c'est documentElement qui est réfèrence. else { docRef = document.body; } // Dans ce cas c'est body qui est réfèrence. // L'événement est passée à la fonction, donc tous sauf IE... if (e) // Dans ce cas on obtient directement la position dans la page. { iPosX = e.pageX; iPosY = e.pageY; } else // Dans ce cas on obtient la position relative à la fenêtre d'affichage. { iPosX = event.clientX + docRef.scrollLeft; iPosY = event.clientY + docRef.scrollTop; } // Pour que la position fonctionne sous Opéra 9... if (navigator.appName.indexOf("Opera") > -1) { iPosX = event.clientX + docRef.scrollLeft; iPosY = event.clientY + docRef.scrollTop; } // Affectation de la position. iPosXFinal = iPosX - iPosXGlobal + iCursorPaddingX; iPosYFinal = iPosY - iPosYGlobal + iCursorPaddingY; // Si l'infobulle déborde en largeur, on la décale. if ((iPosXFinal + iPosXGlobal + 370) > getWidthBrowser()) // On doit rajouter iPosXGlobal. { iPosXFinal -= 310; } objBubble.style.left = iPosXFinal + "px"; objBubble.style.top = iPosYFinal + "px"; } //***************************************************************************************/ // Affiche l'infobulle. function see_bubble(sHTML) { var objBubble = getElement('infobulle'); if ( !objBubble ) { return; } else { //sHTML += "[" + objBubble.style.left + " (" + getWidthBrowser() + ") ; "+ objBubble.style.top +"]"; // Test objBubble.innerHTML = sHTML; objBubble.style.display = "block"; } } //***************************************************************************************/ // Cache l'infobulle. function kill_bubble() { var objBubble = getElement('infobulle'); if ( !objBubble ) { return; } else { //var sHTML = ""; objBubble.innerHTML = ""; objBubble.style.display = "none"; } } //***************************************************************************************/ // Initialisation. document.onmousemove = getMouse;