Menu sur une zone d'une image
Bonjour,
Je suis un débutant en javascript et je souhaiterai créer un menu qui ne soit accessible que sur certaine zone d'une image.
Pour cela j'utilise les balises "Map" et ""Area".
Je souhaiterai que le menu s'affiche lorsque je clique sur la zone et qu'il disparaisse quand je clique sur une autre partie de l'image.
Pour la première partie sa fonctionne bien mais pas pour la seconde.
Quelqu'un a t il une idée ?
Code:
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
112
113
114
115
116
|
<html>
<head>
<title>Test</title>
<script language="javascript">
function select_HS()
{
this.style.cursor='pointer';
}
//MENU
<!--
var colorbg = "#CCCCCC"; //couleur de fond
var colorlien = "#000000"; //couleur du texte
var colorsel = "#0000CC"; //couleur selection
var taillebg = 150 //largeur du menu
var state = 0;
menutexte = new Array;
menulien = new Array;
menutarget = new Array;
// MENU
menutexte[0]= "Test - Ligne 0"
menulien[0]= ""
menutarget[0]=""
menutexte[1]= "Test - Ligne 1"
menulien[1]= ""
menutarget[1]=""
function position(p)
{
position_x = (navigator.appName.substring(0,3) == "Net") ? p.pageX : event.x+document.body.scrollLeft;
position_y = (navigator.appName.substring(0,3) == "Net") ? p.pageY : event.y+document.body.scrollTop;
}
function ouvrir_menu()
{
document.getElementById("menu_context").style.top = position_y;
document.getElementById("menu_context").style.left = position_x;
document.getElementById("menu_context").style.visibility = "visible";
state = 1;
return(false);
}
function fermer_menu()
{
if (state = 0) {
if (document.getElementById)
{
document.getElementById("menu_context").style.top = 0;
document.getElementById("menu_context").style.left = 0;
document.getElementById("menu_context").style.visibility = "hidden";
}
}
}
function menu_sel(selec, lienmenu)
{
if(selec == 1)
{
lienmenu.style.background = colorsel;
lienmenu.style.color = colorbg;
}
else
{
lienmenu.style.background =colorbg;
lienmenu.style.color = colorlien;
}
}
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
function Reinit_state()
{
state = 0;
}
//-->
</script>
</head>
<body>
<table width="100%" align="center">
<tr>
<td width="1000">
<img src="http://www.miwim.fr/blog/ressources/Google1.jpg" name="image" border="2" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="260,450,100" onMouseOver="select_HS()" onClick="ouvrir_menu()" />
<area shape="circle" coords="414,78,10" onMouseOver="select_HS()" onClick="ouvrir_menu()" />
</map>
</td>
</tr>
</table>
<script language="JavaScript">
document.write('<div id=menu_context style="z-index:500;position:absolute;width:'+taillebg+'px; border:2px solid #9D9DA1; background-color:'+colorbg+'; font-family:Verdana; font-size:10px; cursor:default; visibility:hidden;padding:3">');
document.onmousemove = position;
//document.oncontextmenu = ouvrir_menu;
//document.onclick = fermer_menu;
for(a=0;a<menulien.length;a++)
{
if(menutexte[a].length > 0)
{
if(menulien[a].length > 0)
{
document.write('<div onMouseOver="menu_sel(1, this)" onMouseOut="menu_sel(0, this)"><A HREF="'+menulien[a]+'" TARGET="'+menutarget[a]+'" STYLE="text-decoration:none;color:'+colorlien+'">'+menutexte[a]+'</A></div>');
}
else
{
document.write('<div align="center" onMouseOver="menu_sel(1, this)" onMouseOut="menu_sel(0, this)">'+menutexte[a]+'</div>');
}
}
else
{
document.write('<div onMouseOver="menu_sel(1, this)" onMouseOut="menu_sel(0, this)"><hr width="'+(taillebg-5)+'" size="1" color="9D9DA1" /></div>');
}
}
</script>
</body>
</html> |
