mettre un lien sur une image d'un slider javascript

[mateomania]

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 :

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

[mateomania]

en fait je voudrais un lien sur chcune de ces images qui font partie du slider :

Code html :

1
2
3
<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>

[RomainVALERI]

Code :

1
2
3
<li><a href="pages/sopretty.html"><img src="images/sopretty.jpg" alt="Sopretty" title="Sopretty"></a></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>

ce genre de choses ?

[mateomania]

oui tout à fait ... mais ça ne marche pas...
le curseur de la souris ne change même pas au survol de l'image...

[vermine]

Bonjour,

C'est bien dommage parce que le code de Romain fonctionne plutôt très bien avec le code que vous nous avez donné.
Il faudrait voir votre code (avec les <a>) et regarder peut-être si ça ne bloque pas au niveau de vos classes CSS.

[RomainVALERI]

Envoyé par vermine

Il faudrait voir votre code (avec les <a>) et regarder peut-être si ça ne bloque pas au niveau de vos classes CSS.

Très d'accord