Exemples & Sources en JavaScript Annuaire francophone du CGI Exemples & Sources en JavaScript
Accueil du site

Détection (3)
Divers (10)
Formulaire (11)
Image (5)
Navigation (3)

Les 10 derniers
Les plus vus

Infos sur JavaScript
Les mots réservés
Les événements
Les opérateurs

Archives

A propos du site
Le Forum du site

Linker Scripts-fr !

Faîtes un lien sur votre site

 

Valid HTML 4.01!
Valid CSS!

Actuellement 1 connecté

Bienvenue sur Scripts-fr.com

Navigateur de vignette


Exemple :

Ce javascript permet de faire défiller des vignettes et de générer un lien dessus vers la grande image.
Il expliqueégalement le principe du rollover d'une manière plus poussée que dans le script "Rollover de base".

Navigateur de vignettes

Retour

Voir
Avant
Toutes les images sont © Ar Crea'h :
Visitez son site web

Explication du script : (a copier et à coller)

<html>
<head>
<title></title>

<script type="text/javascript">
<!-- Debut
// JavaScript pris sur le site: "http://www.java.scripts-fr.com"<
// Original: Daniel Smith (xalres@earthlink.net)
// Web Site: http://home.earthlink.net/~xalres

prev1 = new Image (80,80);
prev1.src = "images/gaucheOFF.gif";
prev2 = new Image (80,80);
prev2.src = "images/gaucheON.gif";

next1 = new Image (32,18);
next1.src = "images/droiteOFF.gif";
next2 = new Image (32,18);
next2.src = "images/droiteON.gif";

go1 = new Image (100,56);
go1.src = "images/voirOFF.gif";
go2 = new Image (100,56);
go2.src = "images/voirON.gif";

/*
Ici nous alons construire les sources de nos rollover qui nous servirons a faire les boutons suivant, précédent et visionage en grand.
Pour faire cela nous alons construire des objets (
prev1, prev2, next1, nex2, go1 et go2). Ces objets seont créé avec l'opérateur spécial new associé au constructeur Image().
Vus que l'on répète la même opération a chaque fois, je vais l'expliquer une fois pour toute pour avec
go2.
Vous pouvez remarquer qu'a la création de l'objet
go2, on a associé 2 nombres au constructeur Image(). Ces nombres correspondent respectivement à la largeur et à la hauteur de l'image.
Ensuite nous ajoutons la propriété
src à notre objet nouvellement créé ce qui nous permettra de donner l'url de notre image (cela représente l'attribut SRC de 'élément <IMG>).
*/

maxPic = 4; // Ici le nombre de vignette a présenter

p1 = new Image (260,195);
p1.src = "Vignette1.gif";
link1 = "Image1.gif";

p2 = new Image (260,195);
p2.src = "Vignette1.gif";
link2 = "Image1.gif";

p3 = new Image (260,195);
p3.src = "Vignette1.gif";
link3 = "Image1.gif";

p4 = new Image (260,195);
p4.src = "Vignette1.gif";
link4 = "Image1.gif";

/*
Bon pareil que pour la déclaration des images du rollover au dessus je ne vais expliquer qu'une seule fois.
Donc comme pour tout a l'heure, nous créons un objet images
P4 et nous lui donnons son url, je ne reviens pas dessus.
Ce qui est nouveau c'est
link4. Dans cette variable, nous y mettons une chaine de caractère représentant l'url de la GRANDE image a afficher.
*/

count = 1; // La truc super important, nous mettons 1 dans la variable count

function next() {
count++;
if (count > maxPic) {
 count = 1;
 }
eval("document.p.src=p" + count + ".src"); }

/*
Nous commencerons par la fonction
next(), qui comme son nom l'indique, sert à voir l'image suivante ;-)
Vus que c'est la suivante, on incrémente la variable
count de 1 avec l'opérateur mathématique ++.
Une instruction
if nous permet de savoir si count est supérieur à maxPic (en clair si on a cliqué plus de fois sur suivant qu'il n'y a d'image). Si c'est le cas, on remet la variable count à 1 (pour recommencer à la première image).
Sinon (si il reste des images a afficher), avec la méthode
eval, nous affichons l'image correspondant à la valeur de la variable count. Ceci est obtenu en modifiant la source de la balise <img> de la page portant le nom p. Donc "document.p.src=p" + count + ".src" veut dire : la source de l'image ayant pour nom p du document (la page) a pour valeur la source de l'objet image p numéro count.
*/

function back() {
count--;
if (count == 0) {
 count = maxPic;
 }
eval("document.p.src=p" + count + ".src");
}

/*
Bon la je ne vous fait pas de dessin hein (de toute façon je ne sais pas dessiner...). Les seules différence sont que l'on utilise l'opérateur matématique
-- qui fait une décrémentation et dans notre instruction if on regarde si la variable count est arrivée à 0 auquel cas on lui donne la valeur de maxPic pour repartir de la dernière image.
*/

function link() { location.href=eval("link" + count); }

/*
Et pour finir, notre fonction
link() qui toujours grâce à la méthode eval, va nous écrire le lien contenu de notre variable link numéroté count.
Pour ouvrir le lien, nous utilisons la propriété
href de l'objet location.
La j'ai directement mis l'image en plein ecran mais ca pourrait être fait autrement, voir changer cette fonction pour une autre, (Pop-Up d'image par exemple).
*/

// Fin -->
</script>

</head>
<body>

<!-- Il ne nous reste plus qu'à construire notre présentation
Bon je vous passe l'habillage HTML et tout le toutim hein c'est votre job ca :-) -->

<img name="p" src="ImageAVoirEnPremier.gif" border=0 width=260 height=195>
<a href="javascript:back()" onmouseover="prev.src=prev2.src" onmouseout="prev.src=prev1.src">
<img src="images/gauche.gif" border="0" name="prev" width="80" height="80"></a>
<a href="javascript:link()" onmouseover="go.src=go2.src" onmouseout="go.src=go1.src">
<img src="images/voir.gif" border="0" name="go" width="100" height="56"></a>
<a href="javascript:next()" onmouseover="next.src=next2.src" onmouseout="next.src=next1.src">
<img src="images/droite.gif" border="0" name="next"></a>

<!-- On commence par mettre l'image a apparaître en premier. Attention remarquez le name="p", il est utilisé dans le script.
Et enfin crée notre rollover sur les liens appelant les fonction ad hoc avec les événements
onmouseover et onmouseout, ca non plus je ne reviens pas dessus, je l'ai déjà expliqué dans le script "Rollover de base" -->

</body>
</html>


© 2002 Java.Scripts-fr - Tous droits réservés - Design altiline.com - Hébergement eBusiness.be
Pour tout commentaire, n'hésitez pas à contacter le webmaster

Contact !