Changement de coordonnées d'"AREA"

**Fr33dom** · 15/12/2010, 10h15

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 :

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

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

**SpaceFrog** · 15/12/2010, 10h25

je tenterais plutot d'avoir plusieurs maps et des les activer par leur display en fonction de la resolution

**Fr33dom** · 15/12/2010, 10h30

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

**SpaceFrog** · 15/12/2010, 10h34

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

**Fr33dom** · 15/12/2010, 11h07

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 :

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

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 :

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

**SpaceFrog** · 15/12/2010, 11h09

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

Changement de coordonnées d'"AREA"

JavaScript

Vue hybride

Partager

Partager