Discussion :

[MasterOfPotatoes]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci d'avance!

[SylvainPV]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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];
}

[SpaceFrog]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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