Rollover sur carte decoupee

**nico72** · 06/08/2010, 15h10

Bonjour,

Je souhaite faire une carte de france dont les regions changent de couleur au survol de la souris.

J ai donc une image carte de france + une image par region

J ai cree une map avec des zones sensibles que j utilise ainsi :

Code :

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

<area  shape="poly" coords="99,358,131,301,133,261,148,284,148,269,168,279,195,256,215,289,196,329,171,336,160,338,154,351,149,355,158,358,164,367,154,376,152,380,148,381,147,390,137,390,132,386,114,374,110,377" href="#" alt="" onmouseover="document.images[0].src ='Aquitaine.gif';"  />

Le souci c est que mon image s affiche bien mais pas au bon endroit

Si quelqu un pouvait m aider, ça ferait vraiment plaisir

A+

**SpaceFrog** · 06/08/2010, 15h19

tu as une image par departement ???

tu peux pas faire un schema explicatif ?

En gros pour moi il faut parser les coordonnées pour retirer le pont le plus haut et le point le plus a gauche ...
Sachant que les coordonnées vont par paires ...

avec un peu de chance si ton departement est bien détouré ça devrait correspondre au top et left de l'image

**nico72** · 06/08/2010, 15h49

Merci

Voila comment ça se presente

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div style="background-image:url:(carte de france)">
      <img src="image transparente" usemap="#map" />
 
</div>
 
J ai une image qui represente la france en background d'une div
 
<map name="Map" id="Map">
 
<area  shape="poly" coords="99,358,131,301,133,261,148,284,148,269,168,279,195,256,215,289,196,329,171,336,160,338,154,351,149,355,158,358,164,367,154,376,152,380,148,381,147,390,137,390,132,386,114,374,110,377" href="#" alt="" onmouseover="document.images[0].src ='Aquitaine.gif';"  />
 
 
</map>

Effectivement, j ai une image par departement.

Je voudrai que l image de l aquitaine s affiche a sa place, c est a dire dans l area shape

**SpaceFrog** · 06/08/2010, 17h23

de mémoire...

dans les coordonnées de polygones les points vont par paires:

coords="99,358,131,301 ...
=>
un point en top 99, left 358
un en top 131, left 301
etc ...

splittes le coords poru recupere un array
et recupères le min des indexes pairs et le min des indexes impairs
ça devrait te donner le top et left pour ton image ...

**SpaceFrog** · 06/08/2010, 20h13

Bon alors au dessus c'était la version en clair ...
voici la version en obscur ... ^^

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 2</title>
<script type="text/javascript">
function pos(poly){
	poly=poly.split(',');
	var even=new Array();
	odd=new Array();
	var i=-2;
	while(poly[i=i+2]){
		even.push(+poly[i]);
		odd.push(+poly[i+1]);
	}
 
	even.sort(numAsc)
	odd.sort(numAsc)
 
	alert('top ='+even[0] +'px\n\n' + 'left='+odd[0]+'px')
	}
 
function numAsc(a, b){
  return (+a > +b)? 1:(+a < +b)?-1:0;
} 	
</script>
</head>
 
<body>
 
<div style="background-image: url('url%20carte%20de%20france')">
     <img src="image transparente" usemap="#map"/>
</div>
 
<map name="Map" id="Map">
	<area onclick="pos(this.coords)" shape="poly" coords="99,358,131,301,133,261,148,284,148,269,168,279,195,256,215,289,196,329,171,336,160,338,154,351,149,355,158,358,164,367,154,376,152,380,148,381,147,390,137,390,132,386,114,374,110,377" href="#" alt="" onmouseover="document.images[0].src =' Aquitaine.gif';"  />
</map>
 
</body>
</html>

On récupère:
le top du point le plus haut (plus petit coordonnée à index pair)
le left du point le plus à gauche (plus petit coordonnée à index impair)je joins le schéma de principe :

cela suppose donc que les images de tes départements soient "croppées" au plus juste sur fond transparent.

**nico72** · 06/08/2010, 23h55

Merci de ta reponse

Que veux dire croppées ? Découpées peut etre ?

Bon je vais essayer de mettre en place ta solution (avec mes faibles connaissances javascript).

A ton avis, est ce comme cela qu est faite la carte sur http://www.leboncoin.fr

J ai regardé le code source et j ai la forte impression que c est généré avec un logiciel.J ai moi meme essayé avec fireworks.La carte region est bien positionnee mais elle affiche un cadre blanc autour (les images utilisees sont bien des gifs pourtant) et le code est incomprehensible pour moi (je me retrouve avec un mechant tableau=

Encore merci pour ton aide et je te tiens au courant de l evolution

Rollover sur carte decoupee

JavaScript

Vue hybride

Discussions similaires

Partager

Partager