Rollover de navigation en images qui permet de se situer dans un site

Soyez le premier à donner votre avis sur cette source.

Vue 19 192 fois - Téléchargée 1 543 fois

Description

Ce script permet d'avoir un menu qui utilise les rollovers en image
mais il a la particularité de laisser la derniere image sur laquelle
on a cliqué en l'etat lorsque l'on change de page, ce qui permet
à l'internaute de savoir ou il est situé dans le site.

Version 0.5 (Anciennes versions fournies):
Possede un encart Utilisateur pour parametrer la presentation
et qui evite de faire des changements dans le code et de générer
d'eventuelles erreurs ;-)

tests sur:
PC : IE6:ok / Mozilla-FireFox 0.8:ok
Mozilla 5.0:ok / Opera:ok

Mac (Os9): Netscape:ok / IE:ok
Mac (OsX) : IE(OsX):ok / Safari:ok

Le .zip contient les pages HTML d'exemples , le script en .js , l'image
de presentation et les anciennes versions du script.

Source / Exemple :


/**************************************************
---------------------------------------------------
ROLLOVER_DE_NAVIGATION : V 0.5                     |
                                                   |
PC : IE6:ok / Mozilla-FireFox 0.8:ok               |
     Mozilla 5.0:ok  / Opera:ok                    |
                                                   |
Mac (Os9): Netscape:ok / IE:ok                     |
Mac (OsX) : IE(OsX):ok / Safari:ok                 |
                                                   |
Par Eric Delapierre 20/02/2004  MAJ:23/02/2004     |
magoo@robot-droid.com                              |
---------------------------------------------------
Cette version a été completement retravaillée.
Elle permet de ne plus toucher au code. Elle
detecte automatiquement le nombre de liens ajoutés
et fabrique aussitôt les variables necessaires au
fonctionnement du script pour nommer les images et
les variables qui seront passées par url.

Les pages HTML qui integreront ce script
devront placer le fichier rollover_de_navigation_v0-5.js
et la fonction d'affichage affiche().
Pour commencer il suffit de placer les scripts
suivants :
1-
<script src="rollover_de_navigation_v0-5.js"
type="text/javascript"></script>

entre les balises <HEAD> </HEAD> de chaque page. 

2-
<SCRIPT LANGUAGE = "JavaScript">
<!-- Cacher le script aux anciens navigateurs
affiche();
// Cesser de cacher le script -->
</SCRIPT>

Entre les balises <BODY> </BODY> de chaque page
à l'endroit ou l'on veut que le menu s'affiche.

Vous pouvez avec l'encart PARAMETRAGE UTILISATEUR
entrer le nom de chaque  page HTML qui utilisera ce 
script et regler la presentation des images en 
ligne ou en colonne.
En outre il est possible de placer un espace entre
chaque image et de regler la taille de cet espace.

---------------------------------------------------
-Script complet, fichiers d'accompagnement et      |
archives des anciennes versions  telechargeables   |
sur http://www.javascriptfr.com                    |
               -------                             |              
Si vous envisagez de vous servir de ce script ou   |
de le transformer, soyez sympa, laissez cet encart |
ça me fera enooormement plaisir ;-)                |
---------------------------------------------------

                                                                                                      • /
//************************ PARAMETRAGES UTILISATEUR **************************************+ //-----------------------------------------------------------------------------------------//+ // Entrer ici le nom de chaque page HTML qui utilisera ce script en les separant d'un espace + // et sans mettre l'extension .html + // On peut mettre autant de liens que l'on desire :) + //-----------------------------------------------------------------------------------------//+ tous_les_liens = "liens association accueil"; var images_en_ligne = "oui"; /* mettre oui ou non pour avoir un retour charriot. si oui les images sont presentées en ligne si non les images sont presentées en colonne */ var espace_entre_image="non"; /* mettre oui ou non pour avoir un espace entre les images.*/ var taille_de_l_espace = 1; /* mettez ici un chiffre qui reglera la taille de l'espace entre les images*/ //-----------------------------------------------------------------------------------------//+ // Vous n'avez plus à vous occuper du reste ;-) pensez juste a lire l'encart Ajout V 0.4 //+ // situé plus bas pour la nomenclature de vos images. //+ //-----------------------------------------------------------------------------------------//+ //********************** FIN DE PARAMETRAGES UTILISATEUR ******************************+ //------------------------------------------------------------------- /* On veut recuperer le parametre de l'url "www.mondomaine.com/index.html?lien=lien1 */ var url=location.search; //url="?lien=lien1" var params = url.substring(1); // params = "lien=lien1" <-- sans le ? var tab = params.split("="); /*tab est un tableau généré par split(). par ex :On obtient tab[0] = "lien" et tab[1]="lien1" */ lien=tab[1]; // on donne à la variable "lien" la valeur de tab[1] /* search -propriété de l'objet location. Permet de connaitre les paramêtres envoyé dans une url substring - méthode de l'objet String. Extrait une sous-chaine de la chaîne de caractères, à partir du 1er indice indiqué. split - méthode de l'objet String.Découpe une chaîne de caractères suivant le séparateur indiqué en argument. Retourne un tableau contenant les sous-chaînes résultantes.*/ //-------------------------------------------------------------------- // *** Ajout V 0.4 *** //----------------------------------------------------------------- /* ce script automatise la nomenclature des liens et des images, Ce qui évite des manipulations du script et des sources d'erreurs. Il suffit de mettre dans la variable tous_les_liens (plus haut) le nom de chaque page HTML du site, séparé par un espace. Le script automatisera les nomenclatures qui servent par la suite.
      • IMPORTANT ***
Les images doivent IMPERATIVEMENT porter leur nom sous cette forme: lien1B.gif et lien1R.gif --> pour l'image bleu et l'image rouge du premier lien lien2B.gif et lien2R.gif --> pour l'image bleu et l'image rouge du second lien lien3B.gif et lien3R.gif --> pour l'image bleu et l'image rouge du troisieme lien etc... Ces images doivent être stockées dans un repertoire nommé "images" */ var rep = "images/"; // on defini un repertoire pour les images function survol(Objet,Fichier) { if (!document.images) {} /*permet de ne rien faire, pour les navigateurs ne supportant pas les objets images.*/ document.images[Objet].src = rep + Fichier; /*document.images est la collection des images de la page*/ } var tab_url = tous_les_liens.split(" "); //on recupere dans un tableau chaque chaine //separé par un espace function affiche() { // debut fonction for (i=0;i<tab_url.length;i++) { // debut boucle for1 for(i = 0 ; i < tab_url.length ; i++) //on parcourt le tableau de chaine en chaine jusqu'a la fin { //debut boucle for2 tab_image_bleu=new Array; // declaration de nouveaux tableaux tab_lien=new Array; tab_image_rouge=new Array; tab_image=new Array; tab_image_def=new Array; tab_image_def2=new Array; img=new Array; tab_image_bleu[i] ="lien"+(i+1)+"B.gif"; // On ajoute a l'element la nomenclature et le numero tab_image_rouge[i] ="lien"+(i+1)+"R.gif"; // de l'image tab_lien[i] =tab_url[i]+".html?lien=lien"+(i+1); // On ajoute le couple variable numeroté qui est passé ds l'url tab_image[i] ="image"+(i+1); // on numerote l'ojet image tab_image_def="images/"+tab_image_bleu[i]; // on numerote l'image par defaut tab_image_def2="images/"+tab_image_rouge[i]; if (tab[1]=="lien"+(i+1)) // compare la valeur passée en url { /* met tous les boutons en rouge */ img =new Array(tab_image_rouge[i],tab_image_rouge[i],tab_image_def2,tab_image[i]); } else { /* met tous les boutons par defaut en rollover classique*/ img =new Array(tab_image_rouge[i],tab_image_bleu[i],tab_image_def,tab_image[i]); } //----------------------------------------------------------------------- // *** Ajout V 0.5 *** //----------------------------------------------------------------------- // gere les retours charriot ou les espaces entre chaque image. if (images_en_ligne =="oui") // en ligne { // gere l'espace entre les images if (espace_entre_image=="oui") // si espace on fait une boucle { retourcharriot=""; espace1="&nbsp;"; //&nbsp; est espace en HTML espace=""; for (j=0;j< taille_de_l_espace;j++) { espace=espace1+espace; } } else // si pas espace on fait pas de boucle { espace=""; retourcharriot=""; } } else { // en colonne // gere l'espace entre les images if (espace_entre_image=="oui") // si espace on fait une boucle { espace=""; retourcharriot1="<BR>"; retourcharriot=""; for (j=-1;j<taille_de_l_espace ;j++) { retourcharriot=retourcharriot1+retourcharriot; } } else // si pas espace on fait pas de boucle { retourcharriot="<BR>"; espace=""; } } //----------------------------------------------------------------- document.write('<a href="'+tab_lien[i]+'"'); // affichage des boutons document.write('onMouseOver="survol(\''+img[3]+'\',\''+img[0]+'\')"'); document.write('onMouseOut="survol(\''+img[3]+'\',\''+img[1]+'\')">'); document.write('<img name=\"'+img[3]+'\" border="0" src="'+img[2]+'"></a>'); document.write (retourcharriot); document.write (espace); } // fin boucle for1 } // fin fonction for2 } //fin fonction affiche //----------------------------------------------------------------- /* Ne pas oublier de mettre les images dans le repertoire image si on ajoute des liens :)) */

Conclusion :


Ce script sera utilisé en toute probabilité sur ce site : http://www.redelap.com
Ce site traite de Filemaker à tous les niveaux.
Un excellent tutorial est fourni, truffé d'exemples applicables.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1
Date d'inscription
lundi 29 mai 2006
Statut
Membre
Dernière intervention
21 octobre 2008

bonjour,

je voudrais par exemple en tapant l'URL www.monsite.com
arriver sur mon index.php avec le bouton accueil 'Actif'

Chris
Messages postés
5
Date d'inscription
mercredi 11 octobre 2006
Statut
Membre
Dernière intervention
26 septembre 2007

merci pour ce script cartoongraphist...(au nom de tous les débutants qui passent des nuits blanches à essayer d'inventer des codes intuitifs qui fonctionnent pas du tout !!!)

ceci dit, je ne sais pas si il va pouvoir me servir car les pages dans lesquelles il serait génial que je puisse l'utiliser sont en php, et au lieu d'ajouter manuellement les images, je fais une requête à une base de données...

est-il possible que cela fonctionne tel quel, puis-je m'en servir comme base avec des modifs, ou dois-je reprendre mon long chemin de doutes vers une autre source (il y a longtemps que j'ai renoncé à y parvenir tout seul !!!)

novato, madrid.
Messages postés
2
Date d'inscription
dimanche 20 novembre 2005
Statut
Membre
Dernière intervention
20 novembre 2005

Merci
Il est extra ton script!

Par contre, on ne peut afficher que 5 images. On peut mettre plus ?

LePiaf
Messages postés
22
Date d'inscription
vendredi 31 août 2001
Statut
Membre
Dernière intervention
17 janvier 2005

C'est normal, le script ne gere que deux etats. je vais aussi étudier une solution pour cet aspect des que j'aurai un peu plus de temps. Comme pour gomgom, repasse un peu plus tard voir les maj que j'aurai faites.
Messages postés
2
Date d'inscription
mercredi 17 septembre 2003
Statut
Membre
Dernière intervention
17 septembre 2004

Génial : simple et modifiable, bravo ! par contre j'ai modifié le script pour avoir 3 états au lieu de 2, les 3 images se chargent bien, mais quand la souris passe sur le bouton abaissé, il revient à l'état 2, survolé. Grrrr! si qqun sait comment faire, merci
Afficher les 20 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.