Changement d'image en cliquant

Version imprimable

Bonjour tout le monde!
J'y connais pas grand chose au javascript... Voici un script que j'ai trouvé sur internet et adapté pour mon site:
Code:

1 2 3 4 5 6 7 8 9 10 imgs=Array("projets/superman/1.png","projets/superman/2.png","projets/superman/3.png","projets/superman/4.png","projets/superman/5.png"); var x=0; function change() { document.getElementById("bob").src=imgs[++x]; if (x==6) { x=0; } }
Code:

<img src="projets/superman/1.png" id="bob" alt="" onmousedown="change()" style="width: 70%" />

Ca marche bien, sauf un petit problème! Regardez içi: ICIII

Une fois cliqué sur la dernière image, c'est comme s'il y avait un lien vers une image suivante qui n'existe pas?... Quelqu'un voit pourquoi ça marche pas? 8O

Merci d'avance!

Code:

1 2 3 if (x==6) { x=0; }
On revient à la première image à partir de x=6, ce qui laisse donc 6 images possibles, avec comme valeurs pour x : 0 - 1 - 2 - 3 - 4 - 5. Or il n'y a que 5 images dans ta BD.

Pour faire en sorte qu'elle s'adapte à un nombre quelconque d'images sans avoir à changer la condition à chaque fois, tu peux comparer avec imgs.length :
Code:

1 2 3 4 5 6 7 8 var imgs=Array("projets/superman/1.png", "projets/superman/2.png", "projets/superman/3.png", "projets/superman/4.png", "projets/superman/5.png"); var currentImg=0; function change() { currentImg = (currentImg + 1) % imgs.length; document.getElementById("bob").src=imgs[currentImg]; }

Ceci étant plutot qu'un array de string avec les paths ...
passe par un preloader ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var strimgs=Array("projets/superman/1.png", "projets/superman/2.png", "projets/superman/3.png", "projets/superman/4.png", "projets/superman/5.png");
 
imgs=new Array();
for (i=0;i<5;i++){
imgs[i]=new Image();
imgs[i].src=strimgs[i];
}
 
var currentImg=0;
 
function change() {
currentImg = (currentImg + 1) % imgs.length;
document.getElementById("bob").src=imgs[currentImg].src;
}

Cela évitera le temps de chargement lors du click...