Map Area Menu surgissant OnMouseOver

**cantador** · 07/06/2012, 11h31

Bonjour,

j'ai une map avec des area.

Lorsque la souris entre dans le polygone d'une area, je change l'image de fond et déclenche l'ouverture d'un menu.

Voilà le code :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
<!DocType HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Test de Map</title>
    <meta name="Description" content="Test de Map">
    <meta name="Keywords" content="">
    <meta name="Robots" content="all">
    <meta name="Author" content="Moi">
    <meta name="Copyright" content="mySoft">
    <meta name="Generator" content="FrontNet2007 (Win32)">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta http-equiv="Content-Language" content="fr">
    <link rel=stylesheet type='text/css' href='MonStyle.css'>
 
<script language="JavaScript1.1" type="text/javascript">
 
var menuOpen=false;
 
MenuOpen=false;
 
function moveup(obj)
{
document.getElementById(obj).onmouseover = function() {
				MenuOpen=true;
			};	
document.getElementById(obj).onmouseout = function() {
				MenuOpen=false;
			};
} 
 
function showmenu(obj)
{   
		        if (MenuOpen==false)
			{
				if (document.getElementById)
				document.getElementById(obj).style.display = "block"   			
									}				       
}
function closemenu(obj)
{				 moveup(obj);			// test si on est au dessus du Menu	
                if (MenuOpen==false)
			{ 
			    if(document.getElementById)
				document.getElementById(obj).style.display = "none"
									}			  
}
 
</script>
 </head>
 
  <body bgcolor='#DADDC8'><br>
 
	 <map name='MapRegion'>	
 
			<area
			shape='polygon'
			coords='807,471,836,460,854,454,868,451,891,446,901,444,914,419,921,395,922,372,920,351,916,333,905,315,897,301,891,291,885,281,882,275,882,271,876,267,865,267,855,268,847,272,839,281,834,294,830,304,828,318,828,329,827,344,826,359,825,372,824,385,823,398,818,414,812,427,809,437,807,444,805,459,805,467,807,471,830,462,807,471'	
			href='javascript:alert("Test");'
			onmouseover="javascript: showmenu('Menu1'); document.images.CarteRegion.src='Area12.jpg';"
			onmouseout ="javascript: closemenu('Menu1');document.images.CarteRegion.src='Img.jpg';"		
			>	  	
 
    </map>
 
    <img name='CarteRegion' src='Img.jpg' border=0 usemap='#MapRegion'>
 
<div class="popup" id="Menu1" style="display: none;left: 640px; top: 420px;">
	<p class="TitreMenu"><img src="fleche.gif" alt="">	
	<a href="1.php">texte1</a></p><p>
	<a href="2.php">texte2</a></p><p>
	<a href="3.php">texte3</a></p><p>
	<a href="4.php">texte4</a></p><p>
	<a href="5.php">texte5</a></p><p>
	<a href="6.php">texte6</a></p><p>
	<a href="7.php">texte7</a></p><p>
	<a href="8.php">texte8</a></p><p>
	<a href="9.php">texte9</a></p><p>
	<a href="10.php">texte10</a></p><p>
	<a href="11.php">text11</a>
	<span id="clickme">texte12</span>
	</p> 
</div>
 
  </body>
</html>

Le changement d'image et l'apparition du menu fonctionnent bien
mais dès que la souris entre dans le menu, des vibrations intempestives se produisent..

dues au fait que lorsqu'on entre dans le menu, on déclenche le OnMouseOut de l'area..

J'ai donc crée une variable globale MenuOpen et une fonction MoveUp afin de tester si la souris est au dessus du menu.

Mais rien ne marche, car je m'aperçois qu'en fait la variable MenuOpen ne passe jamais à true !

Je suis débutant dans ce domaine et j'ai du faire une belle ânerie...

merci de votre aide

cordialement

**SpaceFrog** · 07/06/2012, 11h35

mouseenter et mouseleave ?

**cantador** · 07/06/2012, 13h08

Bonjour SpaceFrog,

pas bien saisi la réponse...
faudrait-il que je traite également les deux évènements :

- OnMouseEnter et
- OnMouseLeave

?

merci