Changer une image onmouseover

**Linaa** · 05/03/2006, 23h31

Bonjour,

Je voudrais qu'au survol d'un lien, l'image du lien change.
J'ai fait une fonction pour cela, mais cela ne marche pas!

Voici ma page

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
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
 
<head>
<script type="text/javascript">
function changeImg(mn) {
	var img = document.getElementById(mn).src;
	if (img == "imgs/image1.gif")
		document.getElementById(mn).src = "imgs/image2.gif";
	else {
		document.getElementById(mn).src = "imgs/image1.gif";
	}
}
</script>
</head>
 
<body>
<a href="index.php" title="Test" onmouseover="changeImg('mn1')" onmouseout="changeImg('mn1')">
	<img id="mn1" src="imgs/image2.gif" />Test</a>
</body>
 
</html>

Le problème est que l'image change une première fois, puis reste la même.

En affichant le contenu de img, j'obtiens le chemin complet de l'image, c'est pour cela que ça passe toujours dans le else.
Mais comment dois-je faire pour que ça fonctionne ?

Merci de votre aide.

**Matthieu2000** · 06/03/2006, 10h00

img.indexOf("imgs/image1.gif") >=0

:

**jak0** · 06/03/2006, 10h38

Si tu affiche les proprietes de l'image a l'aide du navigateur, tu aura effectivement le chemin complet, toutefois dans le code tu aura toujours le chemin relatif que tu lui donne.

Je pense que le indexof fonctionne bien, mais il me semble qu'il faut lui fixé la position initiale de recherche, ici 0 :

Code :

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

1
2
3
Chaine.indexOf(sous-chaîne, position)
-->
img.indexOf("imgs/image1.gif", 0) != -1

Donc je mettrai :

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
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
 
<head>
<script type="text/javascript">
function changeImg(mn) {
   var img = document.getElementById(mn).src;
   if (img.indexOf("imgs/image1.gif", 0) != -1) {
      document.getElementById(mn).src = "imgs/image2.gif";
   } else {
      document.getElementById(mn).src = "imgs/image1.gif";
   }
}
</script>
</head>
 
<body>
<a href="index.php" title="Test" onmouseover="changeImg('mn1')" onmouseout="changeImg('mn1')">
   <img id="mn1" src="imgs/image2.gif" />Test</a>
</body>
 
</html>

En esperant t'avoir aidé un peu...