Image aléatoire au clic de la souris

Fermé

Angelique C - 16 mars 2011 à 11:51
Angelique C - 16 mars 2011 à 17:28

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

A voir également:

Image aléatoire au clic de la souris
Quelle touche pour débloquer la souris ? - Guide
Image iso - Guide
Tirage au sort excel aléatoire sans doublon ✓ - Forum Excel
Clic droit sans souris - Forum Clavier
Equivalent "clique droit" sur clavier ✓ - Forum Bureautique

10 réponses

Réponse 1 / 10

Angelique C
16 mars 2011 à 17:28

Bon non, là par contre ça marche plus !
J'ai l'alerte "ok" et les images ne changent plus

Réponse 2 / 10

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
16 mars 2011 à 11:58

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.

Réponse 3 / 10

Angelique C
16 mars 2011 à 13:08

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

Réponse 4 / 10

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
16 mars 2011 à 13:44

ok, le nombre d'image est défini ?

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 10

Angelique C
16 mars 2011 à 13:57

Oui, il y a 8 images pour chaque galerie

Réponse 6 / 10

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
16 mars 2011 à 15:38

<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

Réponse 7 / 10

Angelique C
16 mars 2011 à 16:11

C'est parfait ! Déjà un grand merci :-)

Que doit-on améliorer?

Réponse 8 / 10

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
16 mars 2011 à 16:12

Le préchargement des images pour que la transition soit fluide

Réponse 9 / 10

Angelique C
16 mars 2011 à 16:48

D'accord,
... comment on s'y prend ?

Réponse 10 / 10

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
16 mars 2011 à 17:03

<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

Discussions similaires

Clic molette qui ne marche pas

Clic gauche fonctionne très mal

"Vrai" clic droit sans souris (clavier physique ou virtuel) ?

PIX

problème de pixel