Toutela - Le site des Internautes

Ce script permet de mettre en place une barre de navigation qui sera totalement paramétrable en terme d'apparence : des couleurs de fond ou des images de fond avec des rollovers. Le texte de chaque 'bouton' restant déclaré en HTML, donc pas besoin de créer de nombreuses images.

Le code :

Entre <HEAD> et </HEAD> :

Entre <BODY> et </BODY> :

// On créé les quatre tableaux de données pour les intitulés, les liens et les positions X et Y
intitules = new Array();
link = new Array();
posx = new Array();
posy = new Array();

// On remplit les tableaux autant de fois qu'on a de bouton (ici 5 boutons)
intitules[0] = "Accueil";
link[0] = "fichier1.html";
posx[0] = "0";
posy[0] = "0";

intitules[1] = "Rubrique_1";
link[1] = "fichier1.html";
posx[1] = "100";
posy[1] = "0";

intitules[2] = "Rubrique_2";
link[2] = "fichier1.html";
posx[2] = "200";
posy[2] = "0";

intitules[3] = "Informations";
link[3] = "fichier1.html";
posx[3] = "300";
posy[3] = "0";

intitules[4] = "Contacts";
link[4] = "fichier1.html";
posx[4] = "400";
posy[4] = "0";

// Largeur et hauteur de chaque élément
largeur = "100";
hauteur = "20";

// Couleurs et fond 'on' et 'off' du menu
couleur_off = "#FFFFFF";
couleur_on = "#FFFF00";
image_off = "fond_100_20_off.gif";
image_on = "fond_100_20_on.gif";

// Génération de la barre de boutons proprement dite

// Instructions pour Internet Explorer
if (ie4) {

// On compte le nombre de boutons
for ( i = 0; i < intitules.length; i++ ) {

// Création du calque 'off'
document.write("<div id='" + intitules[i] + "_1' style='position: absolute; top: " + posy[i] + "px; left: " + posx[i] + "; width: " + largeur + "px; height: " + hauteur + "px; z-index: 1; background-color: " + couleur_off + "; visibility: visible;'><table border='0' cellspacing='0' cellpadding='0' width='" + largeur + "' height='" + hauteur + "' background='" + image_off + "'><tr><td class='s-menu-off' align='center'>" + intitules[i] + "</td></tr></table></div>");

// Création du calque autorisant l'affichage des calques 'on'
document.write("<div id='" + intitules[i] + "_2' style='position: absolute; top: " + posy[i] + "px; left: " + posx[i] + "; width: " + largeur + "px; height: " + hauteur + "px; z-index: 2; visibility: visible;'><a href='#' OnMouseOver='montre(\"" + intitules[i] + "_5\"); montre(\"" + intitules[i] + "_6\"); cache(\"" + intitules[i] + "_2\");'><img src='px.gif' width='" + largeur + "' height='" + hauteur + "' border='0'></a></div>");

// Création du calque 'on', invisible
document.write("<div id='" + intitules[i] + "_5' style='position: absolute; top: " + posy[i] + "px; left: " + posx[i] + "; width: " + largeur + "px; height: " + hauteur + "px; z-index: 5; background-color: " + couleur_on + "; visibility: hidden;'><table border='0' cellspacing='0' cellpadding='0' width='" + largeur + "' height='" + hauteur + "' background='" + image_on + "'><tr><td class='s-menu-on' align='center'>" + intitules[i] + "</td></tr></table></div>");

// Création du calque donnant le lien et le retour à la position 'off' sur sortie de la souris
document.write("<div id='" + intitules[i] + "_6' style='position: absolute; top: " + posy[i] + "px; left: " + posx[i] + "; width: " + largeur + "px; height: " + hauteur + "px; z-index: 6; visibility: hidden;'><a href='" + link[i] + "' OnMouseOut='montre(\"" + intitules[i] + "_2\"); cache(\"" + intitules[i] + "_5\"); cache(\"" + intitules[i] + "_6\");'><img src='px.gif' width='" + largeur + "' height='" + hauteur + "' border='0'></a></div>");
}
}

// Instructions pour Netscape
if (ns4) {
for ( i = 0; i < intitules.length; i++ ) {
document.write("<layer name='" + intitules[i] + "_1' top='" + posy[i] + "px' left='" + posx[i] + "px' width='" + largeur + "' height='" + hauteur + "' z-index='1' bgcolor='" + couleur_off + "' visibility='visible'><table border='0' cellspacing='0' cellpadding='0' width='" + largeur + "' height='" + hauteur + "' background='" + image_off + "'><tr><td class='s-menu-off' align='center'>" + intitules[i] + "</td></tr></table></layer>");
document.write("<layer name='" + intitules[i] + "_2' top='" + posy[i] + "px' left='" + posx[i] + "px' width='" + largeur + "' height='" + hauteur + "' z-index='2' visibility='visible'><a href='#' OnMouseOver='montre(\"" + intitules[i] + "_5\"); montre(\"" + intitules[i] + "_6\"); cache(\"" + intitules[i] + "_2\");'><img src='px.gif' width='" + largeur + "' height='" + hauteur + "' border='0'></a></layer>");
document.write("<layer name='" + intitules[i] + "_5' top='" + posy[i] + "px' left='" + posx[i] + "px' width='" + largeur + "' height='" + hauteur + "' z-index='5' bgcolor='" + couleur_on + "' visibility='hidden'><table border='0' cellspacing='0' cellpadding='0' width='" + largeur + "' height='" + hauteur + "' background='" + image_on + "'><tr><td class='s-menu-on' align='center'>" + intitules[i] + "</td></tr></table></layer>");
document.write("<layer name='" + intitules[i] + "_6' top='" + posy[i] + "px' left='" + posx[i] + "px' width='" + largeur + "' height='" + hauteur + "' z-index='6' visibility='hidden'><a href='" + link[i] + "' OnMouseOut='montre(\"" + intitules[i] + "_2\"); cache(\"" + intitules[i] + "_5\"); cache(\"" + intitules[i] + "_6\");'><img src='px.gif' width='" + largeur + "' height='" + hauteur + "' border='0'></a></layer>");
}
}

// Fonction d'affichage des calques
function montre(calque) {

// Instructions pour Netscape
if (ns4) {
var ncalque = eval('document.' + calque);
ncalque.visibility = 'visible';
}

// Instructions pour Internet Explorer
if (ie4) {
var ncalque = eval(calque).style;
ncalque.visibility = 'visible';
}
}

// Fonction de masquage des calques
function cache(calque) {
if (ns4) {
var ncalque = eval('document.' + calque);
ncalque.visibility = 'hidden';
}
if (ie4) {
var ncalque = eval(calque).style;
ncalque.visibility = 'hidden';
}
}
</script>

Newsletter

Toutela