Mettre un lien sur chaque photo d'un slideshow

Bonjour,

Le titre n'est pas très clair, donc je m'explique:

j'ai sur mon futur site 4 cadres avec à l'intérieur de chacun 3 photos différentes pour chaque cadre (donc 12 photos) qui changent toutes les 4 secondes

mais je voudrais en plus pouvoir cliquer sur chacune des photos pour m'amener sur leur page respective.

Si je mets un <a Href> sur les images dans la partie html, je n'ai qu'un seul lien pour les 3 photos et moi je veux un lien different pour chaque photo

Comment puis-je m'y prendre svp?

Voici le code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var imagesPath = "images/";
var slideShow = function(imageId, images) {
    var _this = this;
    this.image = document.getElementById(imageId);
    this.images = images;
    var imageIndex = 0;
 
    function change() {
        _this.image.src = imagesPath + _this.images[imageIndex];
        imageIndex = imageIndex >= _this.images.length - 1 ? 0 : imageIndex + 1;
        setTimeout(change, 4000);
    }
    change();
}
window.onload = function() {
    new slideShow("mesimages", ["01.jpg", "02.jpg", "03.jpg"]);
    new slideShow("mesimages2", ["04.jpg", "05.jpg", "06.jpg"]);
    new slideShow("mesimages3", ["07.jpg", "08.jpg", "09.jpg"]);
    new slideShow("mesimages4", ["10.jpg", "11.jpg", "12.jpg"]);
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="img1">
    <img id="mesimages" src="images/01.jpg" width="219" height="330" />
</div>
<div id="img2">
    <img id="mesimages2" src="images/04.jpg" width="219" height="330" />
</div>
<div id="img3">
    <img id="mesimages3" src="images/07.jpg" width="219" height="330" />
</div>
<div id="img4">
    <img id="mesimages4" src="images/10.jpg" width="219" height="330" />
</div>

Merci pour votre aide