Menu sur une zone d'une image

**-Sylvain-** · 23/04/2009, 17h58

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 :

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
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>

**andry.aime** · 24/04/2009, 09h06

Salut,
pour modifier un backgroundColor en JS

Code :

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

lienmenu.style.backgroundColor = colorsel;

Code :

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

<script type="text/javascript">

**-Sylvain-** · 25/04/2009, 10h59

Ok merci pour l'info.

Et pour mon problème principal, pas d'idée ?

**andry.aime** · 25/04/2009, 13h31

Déclare position_x et position_y en variable globale, car dans ton cas, il n'est pas déclaré mais tu les affectes des valeurs dans la fonction position(p) et tu récupère ses valeurs dans ouvrir_menu() qui retournera une erreur ou 0 ou "".

Menu sur une zone d'une image

JavaScript

Discussions similaires

Partager

Partager