Modifier plusieurs sources d'image Javascript

Question

Je crée une galerie d'images simple, et je voudrais créer plusieurs ensembles d'images. En cliquant sur un lien, toutes les images de l'ensemble du lien changeront.

Voici mon code actuel:

<ul> 
    <li><img src="image01.jpg" width="500" height="450"></li> 
    <li><img src="image02.jpg" width="200" height="450"></li> 
    <li><img src="image03.jpg" width="530" height="450"></li> 
    <li><img src="image04.jpg" width="500" height="450"></li> 
    <li><img src="image05.jpg" width="178" height="340"></li> 
    <li><img src="image06.jpg" width="400" height="450"></li> 
    <li><img src="image07.jpg" width="300" height="220"></li> 
    <li><img src="image08.jpg" width="400" height="450"></li> 
    <li><img src="image09.jpg" width="500" height="450"></li> 
    <li><img src="image10.jpg" width="400" height="450"></li> 
    <li><img src="image11.jpg" width="300" height="450"></li> 
    <li><img src="image12.jpg" width="300" height="450"></li> 
    <li><img src="image13.jpg" width="178" height="340"></li> 
    <li><img src="image14.jpg" width="500" height="450"></li> 
    <li><img src="image15.jpg" width="200" height="220"></li> 
    <li><img src="image16.jpg" width="100" height="450"></li> 
</ul> 

Par exemple, sur le clic de link1 les sources seraient tous changés à setA01.jpg, setA02.jpg, et sur le clic de lien2 les souces deviendraient setB01.jpg, et ainsi de suite. Toute aide serait grandement appréciée.

Answer 1

Si vos numéros seront toujours "01, 02, 03, etc" vous pouvez utiliser une fonction comme ce qui suit:

function setBase(baseval) { 
    var images = document.getElementById("mylist").getElementsByTagName("img"); 
    for (var i = 0; i < images.length; i++) { 
    images[i].src = baseval + ((i<9)?0+i:i) + ".jpg"; 
    } 
} 

En utilisant cette contre cette liste:

<a href="#" onclick="setBase('setA'); return false;">Set A</a> 
<ul id="mylist"> 
    <li><img src="image01.jpg" /></li> 
    <li><img src="image02.jpg" /></li> 
</ul> 

créeraient ce qui suit (en supposant que 'setA' a été passé en argument):

<ul id="mylist"> 
    <li><img src="setA01.jpg" /></li> 
    <li><img src="setA02.jpg" /></li> 
</ul>