 |
 Barre d'images avec Rollovers |
|
|
|
Connexion ratee
|
|
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). |
|
|
|
|
|
On créé un tableau 'à deux dimensions'.
La première dimension différencie les barres entre-elles, la seconde détaille le contenu de chaque
barre (images à utiliser et lien à mettre en place).
Ce tableau est ensuite utilisé par une fonction qui génère un tableau HTML contenant autant d'images
que spécifié précédemment, chacune avec son lien et son rollover, sauf l'image qu'on aura
décidé de bloquer pour la page en cours.
En effet, l'intérêt de ce script réside dans sa gestion simultanée de plusieurs lots de barres
et de sa prise en compte du blocage d'une image par barre.
Enfin, une simple fonction de rollover est utilisée pour faire effectivement les rollovers.
Les éléments modifiables sont :
- la description des barres de navigation (respectez tout de même la nomenclature de nommage des images),
- le chemin d'appel des images, modifiable a volonté.
Ce script fonctionne s'il est placé dans la page elle-même comme s'il est placé dans un fichier séparé mais il ne prend toute sa mesure que s'il est dans un fichier séparé, étant donc réutilisé sur tout un site.
Un conseil même : utilisez un fichier pour le script en lui-même et un autre pour la description des barres, vous pourrez ainsi ajouter de nouvelles barres sans risquer de modifier le script.
Ce script est notamment utilisé dans la version HTML du site Piaget (horlogerie et joaillerie de luxe) pour toutes les barres de navigation (52 images réparties sur 11 barres). |
|
|
|
|
|
dans la partie <head>
 |
|
 |
|
<script language="JavaScript">
// Ecriture des éléments de chaque barre de navigation
var nav = new Array()
// 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>
|
|
|
 |
|
 |
dans la partie <body>
|
|
|
|
<!-- Une barre horizontale reprenant la première barre et bloquant le premier bouton -->
<script language="JavaScript">genere_h(0,0);</script>
<!-- Une barre verticale reprenant la seconde barre et bloquant le troisième bouton -->
<script language="JavaScript">genere_v(1,2);</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Une barre horizontale reprenant la première barre et bloquant le premier bouton
Une barre verticale reprenant la seconde barre et bloquant le troisième bouton
|
|
|
|
|
|
|
|
|
|
|
|
|
