Changement de coordonnées d'"AREA"

Version imprimable

bonjour à vous

je viens solliciter votre aide sur un problème que je n'arrive pas a résoudre.

en effet je fait mon site et en page d'accueil j'ai une image avec des zone cliquable. Jusque la rien de bien méchant, le problème se trouve dans le faite que je narrive pas à changer les coordonnées de mes area à partir de mon script.

voici les deux parties de code concerné :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function CoordonneesZones()
{
	if ((screen.width >= 1024) && (screen.height >= 768))
	{
		//Creation de la zone du logo
		var zone = document.createElement("area");
		zone.id = "zone1";
		zone.href = "./contact.html";
		zone.shape = "poly";
		zone.coords = "0,0,50,0,312,0,367,220,454,207,536,212,605,223,658,249,682,270,689,294,682,318,654,344,613,364,537,380,450,384,349,367,288,337,271,312";
 
		//
		var mapObj = document.getElementById("mapMenu")
		mapObj.removeChild(mapObj.firstChild)
		mapObj.appendChild(zone);
	}
	else
	{
 
	}
 
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
	<!-- start page --> 
	<div id="logo1">
		<img src="Images/acceuil.png" usemap="#mapMenu" />
 
		<map name="mapMenu">
			<area id="zone1" shape="poly" coords="267,297,276,268,312,241,367,220,454,207,536,212,605,223,658,249,682,270,689,294,682,318,654,344,613,364,537,380,450,384,349,367,288,337,271,312" href="./contact.html" />
			<area id="zone2" shape="rect" coords="447,115,671,138" href="./1.html" />
			<area id="zone3" shape="rect" coords="606,161,826,184" href="./2.html" />
			<area id="zone4" shape="rect" coords="691,206,829,231" href="./3.html" />
			<area id="zone5" shape="rect" coords="732,251,852,276" href="./4.html" />
			<area id="zone6" shape="rect" coords="733,297,864,322" href="./5.html" />
			<area id="zone7" shape="rect" coords="714,340,853,367" href="./6.html" />
			<area id="zone8" shape="rect" coords="668,387,872,413" href="./7.html" />
			<area id="zone9" shape="rect" coords="623,434,826,461" href="./8.html" />
 
			<script type="text/javascript">
				CoordonneesZones();
			</script>
		</map>
	</div>
	<!-- end page -->
</body>

Le principe étant de changer les coordonnées de mes area en fonction de la résolution détecté.

merci pour votre aide

15/12/2010, 10h25
SpaceFrog

je tenterais plutot d'avoir plusieurs maps et des les activer par leur display en fonction de la resolution
15/12/2010, 10h30
Fr33dom

mettre la détection de résolution dans le code html ?

supprimer la création de area dans le html et mettre le tout dans le .js ?

désolé pour ces questions mais je débute :)
15/12/2010, 10h34
SpaceFrog

non avoir tous les maps sur la page et basculer le display en fonction de la résolution

J'avoue que ça marche plutot bien, mais je ne trouve sa pas bien propre.
Mais le résultat est la, merci pour la suggestion.

je met le code final pour ceux que sa intéresseraient :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function CoordonneesZones()
{
	if ((screen.width >= 1024) && (screen.height >= 768))
	{
		//Utilisation de la zone haute résolution
		document.imageMap.useMap = "#mapMenuHiRes"
	}
	else
	{
		//Utilisation de la zone basse résolution
		document.imageMap.useMap = "#mapMenuHiRes"
	}
 
}

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
	<div id="logo1">
		<img name="imageMap" src="Images/acceuil.png" usemap="#mapMenuHiRes" />
 
		<map name="mapMenuHiRes">
			<area id="zone1" shape="poly" coords="267,297,276,268,312,241,367,220,454,207,536,212,605,223,658,249,682,270,689,294,682,318,654,344,613,364,537,380,450,384,349,367,288,337,271,312" href="./contact.html" />
			<area id="zone2" shape="rect" coords="412,97,630,117" href="./NosMetiers/etudes.html" />
			<area id="zone3" shape="rect" coords="557,141,693,162" href="./NosMetiers/informatique.html" />
			<area id="zone4" shape="rect" coords="642,186,859,206" href="./NosMetiers/automatisme.html" />
			<area id="zone5" shape="rect" coords="702,229,818,251" href="./NosMetiers/robotique.html" />
			<area id="zone6" shape="rect" coords="721,273,921,295" href="./NosMetiers/equipement.html" />
			<area id="zone7" shape="rect" coords="701,317,831,339" href="./NosMetiers/maintenance.html" />
			<area id="zone8" shape="rect" coords="640,362,838,383" href="./NosMetiers/cablage.html" />
			<area id="zone9" shape="rect" coords="556,406,693,427" href="./NosMetiers/solution.html" />
		</map>
 
		<map name="mapMenuLoRes">
			<area id="zone1" shape="poly" coords="0,0,276,0,312,0,367,220,454,207,536,212,605,223,658,249,682,270,689,294,682,318,654,344,613,364,537,380,450,384,349,367,288,337,271,312" href="./contact.html" />
			<area id="zone2" shape="rect" coords="412,97,630,117" href="./1.html" />
			<area id="zone3" shape="rect" coords="557,141,693,162" href="./2.html" />
			<area id="zone4" shape="rect" coords="642,186,859,206" href="./3.html" />
			<area id="zone5" shape="rect" coords="702,229,818,251" href="./4.html" />
			<area id="zone6" shape="rect" coords="721,273,921,295" href="./5.html" />
			<area id="zone7" shape="rect" coords="701,317,831,339" href="./6.html" />
			<area id="zone8" shape="rect" coords="640,362,838,383" href="./7.html" />
			<area id="zone9" shape="rect" coords="556,406,693,427" href=".8.html" />
		</map>
 
 
		<script type="text/javascript">
			CoordonneesZones();
		</script>
	</div>

15/12/2010, 11h09
SpaceFrog

l'autre solution est de faire un include coté serveur du map en fonction de la resolution ...
et là tu n'auras qu'un map sur la page
15/12/2010, 11h14
Fr33dom

ok, bon ba je prend ta première solution

merci pour ton aide si rapide