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

**SpaceFrog** · 07/06/2012, 13h10

non pas également ...

**cantador** · 07/06/2012, 16h34

Le OnMouseEnter ne se déclenche pas sur l'area..
?

**Bovino** · 07/06/2012, 16h52

L'événement mouseenter n'est supporté que par IE.

**SpaceFrog** · 07/06/2012, 16h54

désolé :red :
trop de jquery ...

**cantador** · 07/06/2012, 17h41

J'ai révisé mes tablettes..

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
<!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'>	
 </head>
 
    <body><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'	
        style='cursor: pointer;'
	    onmouseover="showmenu(0); document.images.CarteRegion.src='Area12.jpg';"
	    onmouseout ="closemenu(0);"		
	  >
 
    </map>
    <img name='CarteRegion' src='Img.jpg' border=0 usemap='#MapRegion'>
 
<div id="Menu0" style="left: 640px; top: 420px;" 
    onmouseover = "gMenuOpen[0]=true;"
    onmouseout = "gMenuOpen[0] = false; closereal(0)">
 
   <!-- ça marche ! -->
  aaaaaaaaaaaaaa<br>
 bbbbbbbbbbbbbb<br>
 cccccccccccccc<br>
 dddddddddddddd<br>
 eeeeeeeeeeeeee<br>
 ffffffffffffff<br>
 gggggggggggggg<br>
 hhhhhhhhhhhhhh<br>
 iiiiiiiiiiiiii<br>
 jjjjjjjjjjjjjj<br>
 kkkkkkkkkkkkkk<br>
 llllllllllllll<br>
 mmmmmmmmmmmmmm<br>
 nnnnnnnnnnnnnn<br> 
 
 <!-- ça déconne sur des items d'une simple table !-->
<!--    <table>
	<tr><td>texte0</td></tr>
	<tr><td>texte1</td></tr>
	<tr><td>texte3</td></tr>
	<tr><td>texte4</td></tr>
	<tr><td>texte5</td></tr>
	<tr><td>texte6</td></tr>
	<tr><td>texte7</td></tr>
   </table>  -->
 
  <!-- ça déconne sur des items avec liens !-->  
 
<!--  <p><a href="0.php">texte1</a></p><p>
 <p><a href="1.php">texte2</a></p><p> -->
 
</div> 
 
<script type="text/javascript">
 
var gMenuOpen;
 	gMenuOpen = Array();
 
	max = 1;							// à définir
	for (i = 0 ; i < max ; i++)
		{
		gMenuOpen[i] = false;
	    }
 
function showmenu(obj)
{   
		        if (gMenuOpen[obj]==false)
			{
			    Menu = "Menu" + obj;
				if (document.getElementById)
					{
					document.getElementById(Menu).style.visibility = "visible";
					gMenuOpen[i] = true;
					}
									}				       
}
 
function closemenu(obj)
{
strfunc = "closereal(" + obj + ")";
setTimeout(strfunc, 300);	
}
 
function closereal(obj)
{
document.images.CarteRegion.src='Img.jpg';
                if (gMenuOpen[obj]==false)
			{ 
				Menu = "Menu" + obj;
			    if(document.getElementById)
				document.getElementById(Menu).style.visibility = "hidden"
									}	
}
	</script>
  </body>
</html>

Lorsque je mets du simple texte dans les items du div, tout va bien
mais dès que j'essaie un tableau ou des liens, ça ne va plus du tout
le menu se ferme !

et ce sont des liens qu'il me faut.

il doit y avoir un détail qui m'échappe..

merci par avance de votre aide

**cantador** · 08/06/2012, 09h34

problème réglé !
il fallait scinder les affichages de l'image et du menu..

Map Area Menu surgissant OnMouseOver

JavaScript

Discussions similaires

Partager

Partager