Accueil > > > ROLLOVER DE NAVIGATION EN IMAGES QUI PERMET DE SE SITUER DANS UN SITE
ROLLOVER DE NAVIGATION EN IMAGES QUI PERMET DE SE SITUER DANS UN SITE
Information sur la source
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
- /**************************************************
- ---------------------------------------------------
- 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=" "; // 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 :)) */
-
/**************************************************
---------------------------------------------------
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=" "; // 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.
Historique
- 30 juillet 2004 05:02:28 :
Sources de la même categorie
Commentaires et avis
|
Derniers Blogs
[MIX10] KEYNOTE DEUXIèME JOURNéE - INTERNET EXPLORER 9, HTML5, VISUAL STUDIO 2010, ODATA[MIX10] KEYNOTE DEUXIèME JOURNéE - INTERNET EXPLORER 9, HTML5, VISUAL STUDIO 2010, ODATA par cyril
Le deuxième keynote du mix fut très riche en contenu. Internet Explorer 9 Juste un après le lancement de Internet Explorer 8, Microsoft a dévoilé les nouveautés de Internet Explorer 9. Désormais, IE supportera HTML5, SVG et CSS3. L'élément ...
Cliquez pour lire la suite de l'article par cyril CERTIFICATIONS BETA .NET 4CERTIFICATIONS BETA .NET 4 par KooKiz
Les inscriptions pour les certifications beta .NET 4 ont commencé. L'inscription est offerte pour les examens suivants : - 71-511, TS: Windows Applications Development with Microsoft .NET Framework 4 - 71-515, TS: Web Applications Development with...
Cliquez pour lire la suite de l'article par KooKiz [MIX 2010] - MICROSOFT TRANSLATOR TECHNOLOGY PREVIEW V2[MIX 2010] - MICROSOFT TRANSLATOR TECHNOLOGY PREVIEW V2 par redo
J'imagine que la plupart d'entre vous connaissent bien et utilisent le service de traduction de Google, mais connaissez-vous celui de Microsoft . Microsoft Translator ? Effectivement, Microsoft nous annoncé le lancement version 2 de la Technologie Preview...
Cliquez pour lire la suite de l'article par redo LANCEMENT EN PREVIEW DE CYCLONE LORS DES TECHDAYS 2010!LANCEMENT EN PREVIEW DE CYCLONE LORS DES TECHDAYS 2010! par MPOWARE
Toutes les vidéos de ce lancement sont en ligne!
Partie I - Intro
http://www.youtube.com/watch?v=LkQzTQ8T6CA
Partie II - Démo 1
http://www.youtube.com/watch?v=drAhYQ7lqvo
Partie III - Démo 2
http://www.youtube.com/watch?v=c8KM_1Gqybc...
Cliquez pour lire la suite de l'article par MPOWARE
Logiciels
Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|