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 :


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



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

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

 

[zeb]

Il y a sûrement plusieurs possibilité mais avec cette piste :

dans ton code html ajouter le lien dont tu as besoins :

<div id="slider">
<a href="" id="sliderLink" class="sliderLink"></a>

Dans ton CSS le styler en fonction du design pour qu'il se superpose sur l'image (qui me semble être obtenue avec un fond vue que je ne voie pas de <img> dont tu fait varier la src par javascript (le CSS aurait pu apporter cette précision)) :

.sliderLink{
 width: xxx px;
 height: yyy px;
 display: block;
 position: absolute;
 top: xx px;
 left: yy px;
}

et dans ton code javascript après :
var slider = document.getElementById('slider');
var sliderLink = document.getElementById('sliderLink');

ensuite dans la fonction de rotation des vues :

//On dis au slider à travers sa classe quel image il doit afficher
slider.className = "image"+image;
sliderLink.href = "un truc en fonction d'ou tu en est dans tes images";

 

[mateomania]

pour l'instant il y a 3 images qui composent mon slider et elle sont bien dans mon code html :

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

 

[zeb]

que fait le changement de classe alors?

 

[mateomania]

le changement de classe est là pour signifier quelle est l'image qui doit s'afficher dans le slider quand on clique sur les miniatures qui se trouvent en dessous

 

[mateomania]

Et donc moi je souhaiterais mettre un lien sur chaque image( les grandes images) du slider qui renvoie sur une page différente de mon portfolio :wink:

 

[mateomania]

je bloque la-dessus ...

 

[mateomania]

tu as eu mon lien?

 

[zeb]

non pas vue le lien.

Mais :

<li><a href="truc"><img src="images/sopretty.jpg" alt="Sopretty" title="Sopretty"></a></li>
<li><a href="truc"><img src="images/markstore.jpg" title="Markstore" alt="Markstore"></a></li>
<li><a href="truc"><img src="images/ML.jpg" title="ML | mathieuloubière" alt="MathieuLoubière"></a></li>

te met un lien sur chaque image, reste a savoir ce que le changement de class opére comme changement.

 

[mateomania]

jt'ai envoyé un message privé

 

[mateomania]

bon c'est pas grave, je vais faire sans...
merci quand même !!
bonne fin de soirée