• Des SCRIPTS gratuits, expliqués et personnalisables.
    • Visualisez, puis téléchargez les fichiers correspondants (zip).
        • Il ne restera plus qu'à inclure les codes dans vos pages !
            • Free and customable SCRIPTS.
                • For more convenience, zip files are proposed.
                    • Download and include script on your page.

LISTE des SCRIPTS
Cliquer ici

CETTE RUBRIQUE...

• Infobulle_01
• Infobulle_02
• Infobulle_03
• Infobulle_04
• Infobulle_05
• Infobulle_06
• Infobulle_07
• URL infobulles_01

DES LIENS DANS UNE INFOBULLE

Le kit nécessaire à la réalisation de cet effet est téléchargeable d'un click sur "download".
Peut servir de menu déroulant...
Script compatible IE4+ et NS4 (même si, curieusement, le script ne fonctionne pas sur cette page lue avec NS, le script est pleinement fonctionnel...).

Exemple: cliquez sur la
TABLE DES MATIERES

1/ Ajouter entre les balises <HEAD> et </HEAD>:
ou entre body et /body

<script language="JavaScript1.2">
/* Drop down menu link © Dynamic Drive (www.dynamicdrive.com) */
// Contenu du menu déroulant
var menu1=new Array()
menu1[0]='<a href=test.htm>Texte du lien 1</a><br>'
menu1[1]='<a href=test.htm>Texte du lien 2</a><br>'
menu1[2]='<a href=test.htm>Texte du lien 3</a><br>'
// le nombre des liens n'est pas limité
</script>

<style>
<!--
.iewrap1{
position:relative;
height:30px;
}
.iewrap2{
position:absolute;
}
#dropmenu0{
visibility:hide;
z-index:100;
}
-->
</style>

2/ Ajouter où vous voulez, dans le body:

<script language="JavaScript1.2">
var zindex=100
function dropit2(whichone){
if (window.themenu&&themenu.id!=whichone.id)
themenu.style.visibility="hidden"
themenu=whichone
if (document.all){
themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX
themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (themenu.style.visibility=="hidden"){
themenu.style.visibility="visible"
themenu.style.zIndex=zindex++
}
else{
hidemenu()
}
}
}

function dropit(e,whichone){
if (window.themenu&&themenu.id!=eval(whichone).id)
themenu.visibility="hide"
themenu=eval(whichone)
if (themenu.visibility=="hide")
themenu.visibility="show"
else
themenu.visibility="hide"
themenu.zIndex++
themenu.left=e.pageX-e.layerX
themenu.top=e.pageY-e.layerY+19
return false
}

function hidemenu(whichone){
if (window.themenu)
themenu.style.visibility="hidden"
}

function hidemenu2(){
themenu.visibility="hide"
}

if (document.all)
document.body.onclick=hidemenu
</script>

<!----------Commencement du menu---------->
<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu0);event.cancelBubble=true;return false"><a href="#" onClick="if(document.layers) return dropit(event, 'document.dropmenu0')">ICI LE TEXTE A CLIQUER</a>
</span>
</span>
</layer>
</ilayer>>
<!----------Fin du menu---------->

Le texte à cliquer est modifiable. Sa mise en forme également, par les balises de formatage.

3/ Ajouter à la fin de la page, juste avant </BODY>:

<div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu0.style.padding="4px"
for (i=0;idocument.write(menu1[i])
</script>
</div>

<script language="JavaScript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu2
}
</script>

Personnaliser:
* couleur de l'arrière-plan [background-color], ici lightyellow
* largeur du menu déroulant [width], ici 120
* l'épaisseur du bord [border:2px], ici 2 pixels
* la couleur de la bordure, ici black...

Dans ce script, l'alignement est à gauche. Pour tout autre alignement (centre ou droite), il faudra passer par un tableau.

Si vous utilisez l'apostrophe dans le texte, vous devrez mettre \'.