Image aléatoire au clic de la souris

Angelique C -
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

Afficher la suite

A voir également:

10 réponses

Réponse 1 / 10

Angelique C

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 Statut Membre Dernière intervention 431

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

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 Statut Membre Dernière intervention 431

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

Oui, il y a 8 images pour chaque galerie

Réponse 6 / 10

prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention 431

<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

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 Statut Membre Dernière intervention 431

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

Réponse 9 / 10

Angelique C

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

Réponse 10 / 10

prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention 431

<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

PIX

Clic gauche fonctionne très mal

Clic molette qui ne marche pas

BUG DU CLIC GAUCHE DE MA SOURIS S.O.S

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

Votre réponse

Discussions similaires