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

Pour faire un lien tu peux utiliser la balise a

Exemple :

<a href="url">Texte du lien</a>

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>

<li><a href="images/sopretty.jpg"><img src="images/sopretty.jpg" alt="Sopretty" title="Sopretty"</a></li>

etc...

j'ai bien essayé

<li><a href="portfolio.html">sopretty</a><img src="images/sopretty.jpg" alt="Sopretty" title="Sopretty"></li>

mais sans succès...

Regarde ce que j'ai écris

en fait quand je passe la souris sur l'image , je n'ai même pas le curseur qui change et qui m'indique qu'il y a un lien....
je ne comprends pas

je pense qu'il faut agir au niveau du code javascript ; mais je ne le maitrise pas..
si quelqu'un peut me conseiller ....