Image aléatoire au clic de la souris
Bonjour à vous tous,
Dans une page HTML, j'ai deux blocs contenant chacun une image. Au clic de la souris sur ces images, j'aimerais pouvoir les changer de façon aléatoire avec d'autres images. Sachant que les blocs affichent des images différentes, il y aurait donc 2 galeries images.
Je suppose que je dois parvenir à ce résultat grâce au javascript. Mais de quelle manière je dois m'y prendre au niveau du code?
Merci d'avance
Dans une page HTML, j'ai deux blocs contenant chacun une image. Au clic de la souris sur ces images, j'aimerais pouvoir les changer de façon aléatoire avec d'autres images. Sachant que les blocs affichent des images différentes, il y aurait donc 2 galeries images.
Je suppose que je dois parvenir à ce résultat grâce au javascript. Mais de quelle manière je dois m'y prendre au niveau du code?
Merci d'avance
10 réponses
-
Bon non, là par contre ça marche plus !
J'ai l'alerte "ok" et les images ne changent plus -
Hello !
dans un premier temps :
Je te conseille de numéroter tes images de 1 à .... autant que tu veux dans chacun de tes répertoires et de poster le chemin de ces deux répertoires pour que les exemples que je vais te donner fonctionnent directement chez toi. -
J'ai bien numéroté mes images en commençant par 1, par exemple pour la première galerie le nom des images est donc : tete-1.png / tete-2.png ...
Le chemin des images pour la première galerie est le suivant : racine-du-site/img/tete/tete-1.png
Le chemin des images pour la deuxième galerie est le suivant : racine-du-site/img/corps/corps-1.png
Et je pense faire une autre galerie avec le chemin : racine-du-site/img/queue/queue-1.png
Merci d'avance pour ton aide :-) -
ok, le nombre d'image est défini ?
-
Oui, il y a 8 images pour chaque galerie
-
<html> <head> <script type="text/javascript"> function changeImg(path){ var i = parseInt(Math.random() * 8) + 1; return path + i + '.png'; } </script> </head> <body> <img src="img/corps/corps-1.png" onclick="this.src=changeImg('img/corps/corps-');"/> <img src="img/tete/tete-1.png" onclick="this.src=changeImg('img/tete/tete-');"/> <img src="img/queue/queue-1.png" onclick="this.src=changeImg('img/queue/queue-');"/> </body> </html>
Essaye déja avec ça, si c'est ok on l'améliore -
C'est parfait ! Déjà un grand merci :-)
Que doit-on améliorer? -
Le préchargement des images pour que la transition soit fluide
-
D'accord,
... comment on s'y prend ? -
<html> <head> <script type="text/javascript"> function changeImg(path){ alert('ok'); var i = parseInt(Math.random() * 8) + 1; var img = new Image(); img.src = path + i + '.png'; img.load = new function(){ return img.src; } } </script> </head> <body> <img src="img/corps/corps-1.png" onclick="this.src=changeImg('img/corps/corps-');"/> <img src="img/tete/tete-1.png" onclick="this.src=changeImg('img/tete/tete-');"/> <img src="img/queue/queue-1.png" onclick="this.src=changeImg('img/queue/queue-');"/> </body> </html>
.... bah comme ça ;p
