OnmouseOver et Out

Version imprimable

OnmouseOver et Out

Bonjour à tous,
j'ai un soucis avec un petit morceau de code html/js

Le but/principe:
J'ai cinq picto qui représentent un menu à chaque fois.
Lorsque celui-ci n'est pas survolé, j'ai un picto avec une opacité moindre.
Et lorsque le picto est survolé, j'ai la même image avec l'opacité à 100%

Problème:
Lorsque je survole le premier picto, tout va bien. L'image avec et sans opacité correspond.
Mais lorsque je survole un des 4 autres picto, c'est le premier picto qui change.
Ce qui ne me convient pas.
J'aimerai que ce soit le picto survolé qui change et pas uniquement le premier.

Voici mon code (du moins le plus important):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <script type="text/javascript"> <!-- function montre(valeur){ var bt1=new Image(); bt1.src="./img/"+ valeur +".png"; document.images.bt.src=bt1.src; } function cache(valeur){ var bt2=new Image(); bt2.src="./img/"+ valeur+"-opa.png"; document.images.bt.src=bt2.src; } </script> <a href="./root.htm" onMouseOut="cache('image1')" onMouseOver="montre('image1')" ><img src="./img/image1-opa.png" alt="vignette pour aller à la page d'explication du site" name="bt" border="0" /></a> <a href="./root.htm" onMouseOut="cache('image2')" onMouseOver="montre('image2')" ><img src="./img/image2-opa.png" alt="vignette pour aller au catalogue sanitaire" name="bt" border="0" /></a> <a href="./root.htm" onMouseOut="cache(image3')" onMouseOver="montre('image3')" ><img src="./img/image3-opa.png" alt="vignette pour aller au catalogue ventilation" name="bt" border="0" /></a> <a href="./root.htm" onMouseOut="cache('image4')" onMouseOver="montre('image4')" ><img src="./img/image4-opa.png" alt="vignette pour aller au catalogue chauffage" name="bt" border="0" /></a> <a href="./root.htm" onMouseOut="cache('image5')" onMouseOver="montre('image5')" ><img src="./img/image5-opa.png" alt="vignette pour aller à la page de conseils" name="bt" border="0" /></a>
Merci d'avance de votre aide.

03/12/2010, 11h56
RomainVALERI

Ben oui, tu leur donnes tous le même nom... ^^

donne-leur à chacun un ID différent, et passe cet id en param de ton appel à la fonction montre

Oui effectivement cela ne m'avais pas vraiment sauté aux yeux.

J'ai fait quelques modif mais cela ne marche toujours pas.
Ok l'id est bien passé mais je n'arrive pas faire comprendre au niveau du "document.images.nb" que c'est pas "nb" mais le numéro de l'id.

Voici mon nouveau code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<script type="text/javascript">
	<!--
function montre(valeur, nb){
		var bt1=new Image();
		bt1.src="./img/"+ valeur +".png";
	  document.images.nb.src=bt1.src;
 
	}
 
	function cache(valeur, nb){
		var bt2=new Image();
		bt2.src="./img/"+ valeur+"-opa.png";
	  document.images.nb.src=bt2.src;
	}
</script>
 
<a href="./root.htm" onMouseOut="cache('image1', '1')" onMouseOver="montre('image1', '1')" ><img src="./img/image1-opa.png" alt="vignette pour aller à la page d'explication du site" id="1" border="0" /></a>
			<a href="./root.htm" onMouseOut="cache('image2', '2')" onMouseOver="montre('image2', '2')" ><img src="./img/image2-opa.png" alt="vignette pour aller au catalogue sanitaire" id="2" border="0" /></a>
			<a href="./root.htm" onMouseOut="cache(image3', '3')" onMouseOver="montre('image3', '3')"  ><img src="./img/image3-opa.png" alt="vignette pour aller au catalogue ventilation" id="3" border="0" /></a>
			<a href="./root.htm" onMouseOut="cache('image4', '4')" onMouseOver="montre('image4', '4')"  ><img src="./img/image4-opa.png" alt="vignette pour aller au catalogue chauffage" id="4" border="0" /></a>
			<a href="./root.htm" onMouseOut="cache('image5', '5')" onMouseOver="montre('image5', '5')"  ><img src="./img/image5-opa.png" alt="vignette pour aller à la page de conseils" id="5" border="0" /></a>

Merci de ton aide Romain.

cher developper this est ton ami
ne l'oublie jamais. il n'autre raison d'exister que de te faciliter la vie, réduire la taille de ton code et le rendre plus rapide.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
function montre(el){
  el.firstChild.src="./img/image"+ el.id +".png";
}
 
function cache(el){
  el.firstChild.src="./img/image"+ el.id +"-opa.png";
}
</script>
 
<a id="1" href="./root.htm" onMouseOut="cache(this)" onMouseOver="montre(this)" ><img src="./img/image1-opa.png" alt="vignette pour aller à la page d'explication du site" border="0" /></a>
<a id="2" href="./root.htm" onMouseOut="cache(this)" onMouseOver="montre(this)" ><img src="./img/image2-opa.png" alt="vignette pour aller au catalogue sanitaire" border="0" /></a>
<a id="3" href="./root.htm" onMouseOut="cache(this)" onMouseOver="montre(this)"  ><img src="./img/image3-opa.png" alt="vignette pour aller au catalogue ventilation" border="0" /></a>
<a id="4" href="./root.htm" onMouseOut="cache(this)" onMouseOver="montre(this)"  ><img src="./img/image4-opa.png" alt="vignette pour aller au catalogue chauffage" border="0" /></a>
<a id="5" href="./root.htm" onMouseOut="cache(this)" onMouseOver="montre(this)"  ><img src="./img/image5-opa.png" alt="vignette pour aller à la page de conseils" border="0" /></a>

A+JYT