exemple
Etape 1 : Ajouter entre les balises <HEAD>...</HEAD>:
<SCRIPT LANGUAGE="Javascript1.2"> // Copyright Frank Milard - http://www.asaisir.com/a-la-page IE4 = (document.all) ? 1 : 0; NS4 = (document.layers) ? 1 : 0; VERSION4 = (IE4 | NS4) ? 1 : 0; if (!VERSION4) event = null; function helpGetOffset(obj, coord) { var val = obj["offset"+coord] ; if (coord == "Top") val += obj.offsetHeight; while ((obj = obj.offsetParent )!=null) { val += obj["offset"+coord]; if (obj.border && obj.border != 0) val++; } return val; } function helpDown () { if (IE4) document.all.helpBox.style.visibility = "hidden"; if (NS4) document.helpBox.visibility = "hidden"; } function helpOver (event,texte) { if (!VERSION4) return; var ptrObj, ptrLayer; if (IE4) { ptrObj = event.srcElement; ptrLayer = document.all.helpBox; } if (NS4) { ptrObj = event.target; ptrLayer = document.helpBox; } if (!ptrObj.onmouseout) ptrObj.onmouseout = helpDown; var str = '<DIV CLASS="helpBoxDIV">'+texte+'</DIV>'; if (IE4) { ptrLayer.innerHTML = str; ptrLayer.style.top = helpGetOffset (ptrObj,"Top") + 2; ptrLayer.style.left = helpGetOffset (ptrObj,"Left"); ptrLayer.style.visibility = "visible"; } if (NS4) { ptrLayer.document.write (str); ptrLayer.document.close (); ptrLayer.document.bgColor = "yellow"; ptrLayer.top = ptrObj.y + 20; ptrLayer.left = ptrObj.x; ptrLayer.visibility = "show"; } } // --> </SCRIPT> <STYLE TYPE='text/css'> <!-- #helpBox { position: absolute; z-index: 1000; top: 0px; left: 0px; width: 160px; } DIV.helpBoxDIV { width: 160px; padding: 2px; background: yellow; border: 1px solid black; color: black; font-family: Arial,Helvetica; font-style: Normal; font-weight: Normal; font-size: 12px; line-height: 14px; } --> </STYLE>
Pour configurer l'infobulle, modifiez la partie relative au <style> :
DIV.helpBoxDIV { #helpBoxwidth: 160px; #helpBoxpadding: 2px; #helpBoxbackground: yellow; #helpBoxborder: 1px solid black; #helpBoxcolor: black; #helpBoxfont-family: Arial, #helpBoxfont-style: Normal; #helpBoxfont-weight: Normal; #helpBoxfont-size: 12px; #helpBoxline-height: 14px; }
largeur de l'infobulle espacement intérieur couleur de l'arrière-plan attributs du bord couleur du texte police du texte style du texte format de texte taille de la police
Etape 2 : Ajouter dans le body pour réaliser l'effet.
<DIV ID="helpBox"></DIV>
Etape 3 : Ajouter dans le texte de la page
<A HREF="...html" onMouseover="helpOver(event,'votre texte de l\'infobulle')">
Attention, si vous utilisez l'apostrophe dans le texte de l'infobulle, vous devrez mettre \'.
Ajoute : Si vous ne souhaitez pas utiliser l'infobulle avec un lien, il d'enlever le soulignement du lien pour en faire un texte normal :