Une superbe infobulle. IE4+ et NS4

Services Webmasteurs

Hébergeurs gratuits

Domaine-gratuits

Générateurs gratuits

Thème vBulletin®

Hébergement d'image

hebergements fichiers

Référencement

Scripts

Kits Graphiques gratuits

Tutoriaux

Débrideurs

Section des membres

Une superbe infobulle. IE4+ et NS4

Superbe infobulle et, ce qui ne gâte rien, compatible Explorer et Netscape.

Etape 1 : Ajouter entre les balises [HEAD]... [/HEAD]:

Copier tout <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'>  </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. Etape 2 :
Ajouter dans le body pour réaliser l'effet.

Etape 3 :
Ajouter dans le texte de la page

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 :