<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>
| 
