Toutela - Le site des Internautes

Ce script permet de mettre en place plusieures barres de navigation sur un même site, constituées d'images, permettant des rollovers (changement d'image au passage de la souris) et permettant également de 'bloquer' facilement une image (celle correspondant à la page en cours qui n'a pas besoin de rollover ni de lien).

Le code :

Entre <HEAD> et </HEAD> :

// Première barre
nav[0] = new Array(
"b_0_;fichier1.html",
"b_1_;fichier2.html",
"b_2_;fichier3.html",
"b_3_;fichier4.html",
"b_4_;fichier5.html")

// Seconde barre
nav[1] = new Array(
"j_0_;fichier1.html",
"j_1_;fichier2.html",
"j_2_;fichier3.html")

// Fonction de rollover
function rollover(nom_image,source_image) {
var image_visee = eval('document.' + nom_image);
image_visee.src = source_image;
}

// Fonctions de génération des barres de navigation

// Chemin accédant aux images
var chemin = "images/";

// Pour une barre horizontale
function genere_h(num_nav,num_lock) {

// Début du tableau contenant la barre
document.write('<table cellspacing="0" cellpadding="0" border="0"><tr>');

// Pour la barre sélectionnée, on compte le nombre d'images
for (i = 0; i < nav[num_nav].length; i++) {

// Découpage des informations de la barre (nom de l'image et lien)
var contenu = nav[num_nav][i].split(";");

// Etat des variables pour l'image 'bloquée' (image 'on', pas de lien et pas de rollover)
if ( i == num_lock ) {
etat = 'on';
link = '';
behaviour = '';
link_end = '';
}

// Etat des variables pour les images 'non-bloquées' (image 'off' au départ, lien et rollover)
else {

// L'image de départ est 'off'
etat = 'off';

// Le lien à viser avec éventuellement la frame visée (par défaut la fenêtre courante)
link = '<a href="' + contenu[1] + '" target="_self" ';

// Le Rollover
behaviour = 'onMouseOver="rollover(\'' + contenu[0] + '\',\'' + chemin + contenu[0] + 'on.gif\');" onMouseOut="rollover(\'' + contenu[0] + '\',\'' + chemin + contenu[0] + 'off.gif\');">';
link_end = '</a>';
}

// Ecriture de la cellule contenant chaque image (assemblage des variables et de l'image)
document.write('<td>' + link + behaviour + '<img name="' + contenu[0] + '" src="' + chemin + contenu[0] + etat + '.gif" border="0">' + link_end + '</td>');
}

// Fermeture du tableau
document.write('</tr></table>');
}

// Pour une barre verticale
// Différence : les balises '<tr>' et '</tr>' sont retirées du début et de la fin du tableau
// pour être avec l'écriture de chaque cellule (une cellule par ligne donc)
function genere_v(num_nav,num_lock) {
document.write('<table cellspacing="0" cellpadding="0" border="0">');
for (i = 0; i < nav[num_nav].length; i++) {
var contenu = nav[num_nav][i].split(";");
if ( i == num_lock ) {
etat = 'on';
link = '';
behaviour = '';
link_end = '';
}
else {
etat = 'off';
link = '<a href="' + contenu[1] + '" target="_self" ';
behaviour = 'onMouseOver="rollover(\'' + contenu[0] + '\',\'' + chemin + contenu[0] + 'on.gif\');" onMouseOut="rollover(\'' + contenu[0] + '\',\'' + chemin + contenu[0] + 'off.gif\');">';
link_end = '</a>';
}
document.write('<tr><td>' + link + behaviour + '<img name="' + contenu[0] + '" src="' + chemin + contenu[0] + etat + '.gif" border="0">' + link_end + '</td></tr>');
}
document.write('</table>');
}
</script>

Entre <BODY> et </BODY> :

Newsletter

Toutela