Bonjour,
je souhaiterais mettre un lien sur chaque image qui compose mon slider et qui renverrai sur des pages différentes ...
je n'y arrive pas...
si quelqu'un a une idée
merci d'avance !
je vous mets le code html et javascript (il y a du css aussi mais je ne crois pas que ce soit necessaire lol ) :
html :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 <div id="slider"> <!-- La banderolle qui contiens toute les images --> <div id="mask"> <ul id="image_container" name="image_container"> <li><img src="images/sopretty.jpg" alt="Sopretty" title="Sopretty"</li> <li><img src="images/markstore.jpg" title="Markstore" alt="Markstore"></li> <li><img src="images/ML.jpg" title="ML | mathieuloubière" alt="MathieuLoubière"></li> </ul> </div> <img src="images/glass.png" name="glass" id="glass"> <!-- Les fleches de navigations --> <ul id="dots"> <li class="button1" onClick="changeImage(1)"></li> <li class="button2" onClick="changeImage(2)"></li> <li class="button3" onClick="changeImage(3)"></li> </ul> <img src="images/fleche_gauche.png" class="fleche" id="fleche_gauche" alt="Précèdent" title="Prècédent" onClick="prevImage()"> <img src="images/fleche_droite.png" alt="Suivant" name="fleche_droite" class="fleche" id="fleche_droite" title="Suivant" onClick="nextImage()"> </div>
-------------------------------------
javascript :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 // Des Variables pour pouvoir modifier facilement ce qui doit l'être var secDuration = 5; var image = 1; var maxImages =3; var slider = document.getElementById('slider'); var timeout // La fonction qui change les images. Peut pointer vers une image spécifique, ou bien être appelée vide, pour passer ç celle d'apres function changeImage(requiredImage) { // Début de l'algorithme . if (!requiredImage && requiredImage != 0){ //Si nous n'avons pas spécifié une image if(image < maxImages){// Si l'image n'est pas la dernière, on avance d'une image image++; } else{ image = 1;//Si Nous sommes sur la dernière, on reviens au début } } else{ // Si nous avont spécifié une image if(requiredImage > maxImages){//Si nous avont spécifié une image au dela de la dernière, on revient à la première image = 1; } else if(requiredImage < 1){ //Si nous avont spécifié une image 0 ou moins, on vas à la dernière image image = maxImages; } else{ image = requiredImage; // Sinon, on vas à l'image spécifiée. } } //On dis au slider à travers sa classe quel image il doit afficher slider.className = "image"+image; // On nettoie et relance le timeout clearTimeout(timeout) timeout = setTimeout("changeImage()",secDuration*1000); } //Deux petites fonctions tres compréhensibles function nextImage(){ changeImage(image+1); } function prevImage(){ changeImage(image-1); } //On met le slide sur l'image par défaut, ici la 1ere changeImage(1);
Partager