OnMouseOver dans une map

Version imprimable

2 pièce(s) jointe(s)

Bonjour,
Je vous explique mon souci :
J'ai découpé des images de coupe de scanner (voir piece jointe) et l'objectif est de survoler les loges musculaires (zones entourées en couleur) et pendant le survol d'afficher les légendes correspondantes.
Passer de la piece jointe 1 à la piece jointe 2.
J'y arrive donc, comme ceci, au clic :
Code:

1 2 3 4 5 6 7 <body> <img src="Annexe cuisse1.jpg" width="960" height="720" border="0" usemap="#Map" /> <map name="map" id="Map"> <area shape="poly" coords="415,214,471,188,516,187,537,202,550,218,562,242,552,272,500,271,462,271,439,275,406,234" href="Annexe cuisse2.jpg" /> </map> </body>
Ce que je souhaite c'est que ça se fasse au survol, donc je fais ça en regardant à droite et à gauche comment cela se passait :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script type="text/javascript"> image1 = new Image; image1.src = "C:\Documents and Settings\u435643\Bureau\Annexe cuisse2.jpg"; image2 = new Image; image2.src = "Annexe cuisse1.jpg"; </script> ... ... <body> <img src="Annexe cuisse1.jpg" width="960" height="720" border="0" usemap="#Map" /> <map name="map" id="Map"> <area shape="poly" coords="415,214,471,188,516,187,537,202,550,218,562,242,552,272,500,271,462,271,439,275,406,234" href="#" onMouseOver="map.src=image1.src" onMouseOut="map.src=image2.src" /> </map> </body>
Pour l'instant ça ne fonctionne pas...
Suis-je dans la bonne direction?
Je vous remercie.

04/09/2007, 09h50
badmanner

Je pensais que ma question allait trouver réponse rapidement :cry:

Peut etre que je me suis mal expliqué.

J'essaye de faire plus simple :

L'objectif est le suivant :

Quand je vais survoler la zone entourée de pointillés jaunes (image jointe 1) cela doit m'afficher en remplacement l'image 2 jointe.
C'est un rollover standard mais qui ne se déclenchera que quand je vais survoler une zone précise de l'image 1.

Merci à tous
04/09/2007, 10h01
SpaceFrog

concerannt le principe tu es sur la bonne voie ...
tu as juste deux soucis ...

la syntaxe : onmouseover et onmouseout tout en minuscules...

ensuite:

Code:

onmouseover="self.location.href=image1.src"
04/09/2007, 10h36
badmanner

Merci beaucoup pour ta réponse :

Le onmouseover fonctionne.

Cependant un autre problème survient :

Mon image 2 remplace mon image 1 mais ensuite le onmouseout ne peut fonctionner car sur cette deuxieme image il n'y a pas de zone réactive, la totalité de l'image étant remplacée...
Il faudrait que, quand je suis sur l'image 2 dans la zone entourée de jaune, quand j'en ressors je retombe sur l'image1
Comment puis-je faire?
04/09/2007, 18h27
SpaceFrog

Le mappage reste le même ?

il faut passer par une petite fonction qui attribue dynamiquement le usemap ...