Accéder au texte descriptif d'une image après un clic dessus

**rambc** · 21/04/2009, 15h09

Bonjour,
je voudrais une fonction qui renvoie le texte alternatif d'une image lorsque l'on clique dessus.
Il me faudrait une méthode qui marche avec un nombre inconnu a priori d'images.

Toute info. est la bienvenue.

**andry.aime** · 21/04/2009, 15h20

Salut,

Code :

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

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function affiche()
{
 var mesImages=document.images;
for (var i=0;i<mesImages.length;i++)
{mesImages[i].onclik=function(){alert(mesImages[i].alt)}}
}
</script>
<body onload="affiche()">

**rambc** · 21/04/2009, 15h47

Merci pour cette réponse mais je n'ai pas réussi à la faire marcher. Voici le code HTML que j'ai essayé de faire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
	<script type="text/javascript">
		function affiche(){
			var mesImages=document.img;
			for (var i=0;i<mesImages.length;i++){
				mesImages[i].onclik = function(){alert(mesImages[i].alt)}
			}
		}
	</script>
</head>
 
<body onload="affiche()">
<img src="im_1.jpg" name="images1" width="256" height="192" border="1" alt="im_1">
<img src="im_2.jpg" name="images2" width="609" height="457" border="1" alt="im_2">
</body>
</html>

Au pire une solution où il faut ajouter l'action directement dans les balises "image" qui appellerait une fonction JS avec le texte alternatif me conviendrait aussi.

**Bovino** · 21/04/2009, 19h21

Salut,

Remplace par :

Code :

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

mesImages[i].onclik=function(){alert(this.alt)}

L'explication est dans la FAQ !

**rambc** · 21/04/2009, 20h10

Cela ne marche pas. Je vais me tourner vers une méthode classique directe.

Merci pour la FAQ.

**Bovino** · 21/04/2009, 20h15

Mais non, ne désespère pas

Code :

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

var mesImages=document.images;

voire

Code :

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

var mesImages=document.getElementsByTagName('img');

**rambc** · 21/04/2009, 20h26

Cela ne marche toujours pas. Cela doit venir du fait que mes images sont déjà présentes dans le fichier HTML au lieu d'être créées par le script.

Merci quand même.

**Bovino** · 21/04/2009, 20h32

Non, pas du tout, cela vient du fait que andry a écrit son code rapidement et qu'il y a des fautes de frappe !
Au lieu de juste dire ça ne marche pas, il faut regarder un peu le code et corriger :

Code :

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

mesImages[i].onclick = function(){alert(this.alt)}

**rambc** · 21/04/2009, 21h30

Voici mon code au complet avant que j'aille me coucher :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
	<script type="javascript">
		function affiche(){
			var mesImages=document.getElementsByTagName('img');
			for (var i=0;i<mesImages.length;i++){
				mesImages[i].onclick = function(){alert(this.alt)}
			}
		}
	</script>
</head>
 
<body onload="affiche()">
<img src="im_1.jpg" name="images1" width="256" height="192" border="1" alt="im_1">
<img src="im_2.jpg" name="images2" width="609" height="457" border="1" alt="im_2">
</body>
</html>

**andry.aime** · 22/04/2009, 07h49

Salut,

Code :

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

1
2
3
4
function affiche()
{
	for(var i=0; i<document.images.length;i++){document.images[i].onclick=function(){alert(this.alt)}}
}

Tester sur FF et IE6 et ça marche.

**rambc** · 22/04/2009, 23h41

Ecoutes voici ton code et cela ne marche pas...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
	<script type="javascript">
		function affiche()
{
	for(var i=0; i<document.images.length;i++){document.images[i].onclick=function(){alert(this.alt)}}
}
	</script>
</head>
 
<body onload="affiche()">
<img src="im_1.jpg" name="images1" width="256" height="192" border="1" alt="im_1">
<img src="im_2.jpg" name="images2" width="609" height="457" border="1" alt="im_2">
</body>
</html>