Très facile à paramétrer.
Réalisez 4 paires d' images 16X 16, chaque paire devant comporter une image grise et une image de couleur pour donner l'effet d'éteindre ou d'allumer (off et on)
hébergez les images et copiez les adresses dans le script.
Changez les couleurs des fonds et des liens.
Copiez le script comme suit:

Entre les balises <head> et </head>

<p><SCRIPT language=javascript></p> <p>// Script développé par http://www.toutjavascript.com<br />// Utilisation autorisée à condition de laisser ce commentaire</p> <p>// Paramétrage ici :<br />var MenuToolBar=new CreerMenuToolBar('#316AC5', '#6699FF', '#000099', '#6699FF', 'font-family:verdana;font-size:11px;color:white;font-weight:bold', 16, 16)<br />MenuToolBar.Add('image1off.gif', 'image1on.gif', 'Menu 1', 'menuico.html');<br />MenuToolBar.Add('image2off.gif', 'image2on.gif', 'Menu 2', 'menuico.html');<br />MenuToolBar.Add('image3off.gif', 'image3on.gif', 'Tout JavaScript.com', 'http://www.toutjavascript.com/');</p> <p>// Fonctions internes<br />function CreerMenuToolBar(colFond, colClair, colOmbre, colCligno, style, hauteur, largeur) {this.nb=0;this.colFond=colFond;this.colClair=colClair;this.colOmbre=colOmbre;this.colCligno=colCligno;this.hauteur=hauteur;this.largeur=largeur;this.style=style;this.Indice=-1;this.Nbcligno=0;this.Add=AddMenuToolBar;this.Aff=AffMenuToolBar;}<br />function AddMenuToolBar(imgOff, imgOn, libelle, url) {var link=new Object();link.imgOff=imgOff;link.imgOn=imgOn;link.libelle=libelle;link.url=url;this[this.nb]=link;this.nb++;}<br />function AffMenuToolBar() {<br /> if (document.getElementById || document.all) {<br /> var Z="<TABLE border=0 cellpadding=1 cellspacing=1><TR>";<br /> for (var i=0; i<this.nb; i++) {<br /> Z+="<TD onMouseOver='AffMenuToolBarOver(this,"+i+")' onMouseOut='AffMenuToolBarOut(this,"+i+")' onMouseDown='AffMenuToolBarDown(this,"+i+")' onClick='AffMenuToolBarClic(this,"+i+")' style='border-style:solid;border-width:1px;border-color:"+this.colFond+";"+this.style+";cursor:pointer'><IMG name='MenuToolBarIMG"+i+"' src='"+this[i].imgOff+"' border=0 width="+this.largeur+" height="+this.hauteur+" align=top> "+this[i].libelle+"</TD>";<br /> }<br /> Z+="</TR></TABLE>";<br /> } else {<br /> var Z="|  ";<br /> for (var i=0; i<this.nb; i++) {<br /> Z+="<A href='"+this[i].url+"' style='"+this.style+"'><IMG name='MenuToolBarIMG"+i+"' src=\""+this[i].imgOff+"\" border=0 width="+this.largeur+" height="+this.hauteur+" align=top> "+this[i].libelle+"</A> | ";<br /> }<br /> }<br /> document.write(Z);<br />}<br />function AffMenuToolBarOver(obj,ind) {obj.style.borderTopColor=MenuToolBar.colClair; obj.style.borderLeftColor=MenuToolBar.colClair; obj.style.borderBottomColor=MenuToolBar.colOmbre; obj.style.borderRightColor=MenuToolBar.colOmbre; document.images['MenuToolBarIMG'+ind].src=MenuToolBar[ind].imgOn;}<br />function AffMenuToolBarOut(obj,ind) {obj.style.borderTopColor=MenuToolBar.colFond; obj.style.borderBottomColor=MenuToolBar.colFond; obj.style.borderLeftColor=MenuToolBar.colFond; obj.style.borderRightColor=MenuToolBar.colFond; document.images['MenuToolBarIMG'+ind].src=MenuToolBar[ind].imgOff;}<br />function AffMenuToolBarDown(obj,ind) {obj.style.borderTopColor=MenuToolBar.colOmbre; obj.style.borderLeftColor=MenuToolBar.colOmbre; obj.style.borderBottomColor=MenuToolBar.colClair; obj.style.borderRightColor=MenuToolBar.colClair;}<br />function AffMenuToolBarClic(obj,ind) {MenuToolBar.Indice=ind;MenuToolBar.obj=obj;MenuToolBar.Nbcligno=0;MenuToolBarCligno()}<br />function MenuToolBarCligno() {<br /> MenuToolBar.Nbcligno++;<br /> if (Math.round(MenuToolBar.Nbcligno/2) != MenuToolBar.Nbcligno/2) {<br /> MenuToolBar.obj.style.backgroundColor=MenuToolBar.colCligno;<br /> } else {<br /> MenuToolBar.obj.style.backgroundColor=MenuToolBar.colFond;<br /> }<br /> if (MenuToolBar.Nbcligno < 8) {<br /> setTimeout('MenuToolBarCligno()',50-5*MenuToolBar.Nbcligno);<br /> } else {<br /> window.location=MenuToolBar[MenuToolBar.Indice].url;<br /> }<br />}</p> <p></script></p>

Entre les balises <body> et </body>

Menu Toolbar

Partager cet article