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