Rollover qui ne fonctionne pas ?

**doncho23** · 10/06/2008, 19h04

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 :

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

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

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.

**Thes32** · 10/06/2008, 19h52

salut,
pourquoi ne pas faire plus simple

Code :

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

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>');" />

**doncho23** · 11/06/2008, 00h54

Envoyé par thes32

salut,
pourquoi ne pas faire plus simple

Code :

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

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.

C'est bien cela que je dois obtenir.

Code :

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

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.

En tout cas merci de ton aide.

**Auteur** · 11/06/2008, 09h56

et comme ceci ?

Code html :

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
 
<html>
 
<script type="text/javascript">
<!--
function changeImage(objImg, nomImg) 
{
  objImg.src = nomImg;
}
//-->
</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 ?

**doncho23** · 11/06/2008, 11h49

Merci !!!!!

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.

Tandis que moi je galère.

En tout cas SUPER FORUM.
Trop rapide!!!

**Auteur** · 11/06/2008, 12h49

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)

**doncho23** · 11/06/2008, 14h43

, t'es un DIEU mdr.
Et bien que dire mis-à-part MERRRRCCCCCCIIIII.

Merci à tous.

Rollover qui ne fonctionne pas ?

JavaScript

Discussions similaires

Partager

Partager