Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

DHTML
Systèmes de navigation

  Menu d'images ou couleurs paramétrable

fonction  principe  la methode elle-meme  demonstration  telechargement du script  Compatibilite du script... a partir de : 

  Fonction
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.
  Principe
Toute la barre de bouton est placée dans des calques. Quatre calques par bouton.
  • Premier calque : le bouton en position 'off',
  • second calque : une zone réactive pour lancer le rollover,
  • troisième calque : le bouton en position 'on',
  • dernier calque : une zone réactive pour activer le lien et effectuer le retour du rollover si la souris sort de la zone.
Une feuille de style détermine l'apparence des textes des boutons dans les positions 'on' et 'off'.

Les données nécessaires sont apportées tout d'abord par quatre tableaux JavaScript indiquant le texte du bouton, le lien à lancer sur le click, la position en abcisse et la position en ordonnée du bouton.
Puis les largeur et hauteur de chaque bouton (tailles identiques), enfin les couleurs et les images à utiliser en fond des boutons.
Si on utilise uniquement des couleurs, on ne renseigne pas les sources des images, et inversement si on utilise des images (en fait les couleurs ne seront pas visibles de toute façon).

Attention : pour une meilleure compatibilité avec Netscape, mieux vaut placer tout le script dans la partie '<body>' et mettre un appel JavaScript vide dans la partie '<head>'.
  Le script
dans la partie <head>
<style>
/* Styles adoptés par les textes 'on' et 'off' */
.s-menu-on { font-family: arial; font-size: 12px; color: #FF0000; font-weight: bold; }
.s-menu-off { font-family: arial; font-size: 12px; color: #000000; }
</style>

<script language="JavaScript">
// Appel JavaScript pour initialiser Netscape
</script>

dans la partie <body>
<script language="JavaScript">
// détection du navigateur
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

// 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>
  Démonstration

Voir la démonstration
  Téléchargement
Ce script est disponible en deux versions :
  • le script est intégré à la page où il agit,
  • le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

    L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
    Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.
    		•
    Script intégré :
    nav_img_coul.zip
    5 Ko    		 telechargez le script telechargez le script
    Script séparé :
    nav_img_coul2.zip
    5 Ko
    Recherche
    		aide sur la recherche
    CSS 2
    HTML 4
    Javascript 1.3
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter