mettre un lien sur une image d'un slider javascript
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:
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:
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); |
