Rollover qui ne fonctionne pas ?

Version imprimable

Bonjours à tous et toutes,
En fait j'essaye de créer un effet de Roll over en javascript mais celui-ci ne fonctionne que sur la première image.
Pourquoi donc ?? :(

Code javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
monrollover = new Image();
monrollover2 = new Image();
monrollover3 = new Image();
monrollover4 = new Image();
monrollover5 = new Image();
monrollover6 = new Image();
monrollover7 = new Image();
monrollover8 = new Image();
monrollover9 = new Image();
monrollover10 = new Image();
monrollover11 = new Image();
monrollover12 = new Image();
monrollover.src = "article_small_one_hover.png";
monrollover2.src2 = "article_small_two_hover.png";
monrollover3.src3 = "article_small_three_hover.png";
monrollover4.src4 = "article_small_four_hover.png";
monrollover5.src5 = "article_small_five_hover.png";
monrollover6.src6 = "article_small_six_hover.png";
monrollover7.src7 = "article_small_seven_hover.png";
monrollover8.src8 = "article_small_height_hover.png";
monrollover9.src9 = "article_small_nine_hover.png";
monrollover10.src10 = "article_small_ten_hover.png";
monrollover11.src11 = "article_small_eleven_hover.png";
monrollover12.src12 = "article_small_twelve_hover.png";
</script>

Code html:

Code:

1
2
3
<dt onclick="clicMenu('1');" id="itemmenu1"><a href="#" onmouseover="monrollover.src='article_small_one_hover.png';" onmouseout="monrollover.src='article_small_one.png';"><img src="article_small_one.png" alt="terrain" name="monrollover"/></a></dt>
 
<dt onclick="clicMenu('2');" id="itemmenu2"><a href="#" onmouseover="monrollover2.src2='article_small_two_hover.png';" onmouseout="monrollover2.src2='article_small_two.png';"><img src="article_small_two.png" alt="terrain" name="monrollover2"/></a></dt>

Et ainsi de suite jusqu'au 12ème.

Merci pour vos futures réponses.

salut,
pourquoi ne pas faire plus simple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<script language="JavaScript" type="text/javascript">
function changeImage(name, url) {
  if (document.images[name]) {
    document.images[name].src = url;
}
</script>
<img 
  name="myImage"
  src="inactive.gif"
  onmouseover="changeImage('myImage', '<image1>');"
  onmouseout="changeImage('myImage', '<image2>');" />

Citation:

Envoyé par thes32

salut,
pourquoi ne pas faire plus simple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<script language="JavaScript" type="text/javascript">
function changeImage(name, url) {
  if (document.images[name]) {
    document.images[name].src = url;
}
</script>
<img 
  name="myImage"
  src="inactive.gif"
  onmouseover="changeImage('myImage', '<image1>');"
  onmouseout="changeImage('myImage', '<image2>');" />

Merci pour ta réponse.
J'ai fais ce que tu m'as dis de faire, et cela ne fonctionne pas. :cry:
C'est bien cela que je dois obtenir.

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<script language="javascript" type="text/javascript">
 
function changeImage(name, url) {
  if (document.images[name]) {
    document.images[name].src = url;
}
</script>
 
 
<a href="#"><img src="article_small_one.png" onmouseover="changeImage('myImage','article_small_one_hover.png');" onmouseout="changeImage('myImage','article_small_one.png');" alt="terrain" name="myImage"/></a>

Bon si j'ai fais une bêtise on ne se moque pas. Je suis plus que débutant. :oops:
En tout cas merci de ton aide.

et comme ceci ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html> <script type="text/javascript">  </script> </head> <body> <a href="#"><img src="article_small_one.png" onmouseover="changeImage(this,'article_small_one_hover.png');" onmouseout="changeImage(this,'article_small_one.png');" alt="terrain" /></a> </body> </html>
par rapport au code de thes32 : le premier argument de la fonction n'est pas l'attribut name de l'image mais directement l'objet déclenchant les événements (this).

doncho23 : sinon tu n'as pas oublié de préciser le chemin des images ?

11/06/2008, 11h49
doncho23

Merci !!!!! :D Trop bien.

Mon problème est résolu mais j'aurais aimé une dernière chose, c'est lorsque l'on clique sur un des liens l'image hover reste et il n'y aurais plus moyen de cliquer sur celui-ci, mais que lorsque que l'on clique sur un autre des liens il redevienne actif.
Ce serais pour moi une façon de définir que le lien est fonctionnel.

Voilà j'en profite car cela semble assez simple pour vous. :lol:
Tandis que moi je galère. :bug:

En tout cas SUPER FORUM.
Trop rapide!!!
11/06/2008, 12h49
Auteur

1 pièce(s) jointe(s)

Quelque chose comme ceci ? Le fichier zip contient le code HTML, JS, et CSS ainsi que des images pour l'exemple.

J'ai supprimé les liens <a> (qui ne sert pas a priori) et j'ai ajouté l'événement onclick dans les balises img.
Tu as juste à changer le nom et le chemin des images (dans l'attribut src et le second arguments des fonctions appelées dans le onmouseover et onmouseout) ;)
11/06/2008, 14h43
doncho23

8O, t'es un DIEU mdr.
Et bien que dire mis-à-part MERRRRCCCCCCIIIII. :mouarf:
Merci à tous.