OnMouseOver dans une map

**badmanner** · 03/09/2007, 14h15

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 :

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

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 :

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

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.

**badmanner** · 04/09/2007, 10h50

Je pensais que ma question allait trouver réponse rapidement

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

**SpaceFrog** · 04/09/2007, 11h01

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

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

ensuite:

Code :

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

onmouseover="self.location.href=image1.src"

**badmanner** · 04/09/2007, 11h36

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?

**SpaceFrog** · 04/09/2007, 19h27

Le mappage reste le même ?

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

OnMouseOver dans une map

JavaScript

Discussions similaires

Partager

Partager