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

**SpaceFrog** · 07/08/2010, 10h31

oui

croppées = découpées ... j'avais perdu le mot en français, et utilisé le mot dans le menu des applications graphiques ...

dans la page du bon coin ils ne procèdent pas exactement de la même façon...

toutes les images de région ont la même taille que l'image de la carte de france.
En fait pour chaque région ils ont pris la carte de france et effacé toutes les régions sauf une.
suffit de regarder une image de leur preload
http://193.164.197.40/img/map_8.gif
et ils mettent l'image de région en background d'un div:

Code :

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

1
2
3
4
5
<div class="Map MapContainer">
						<div style="background-image:url(http://193.164.197.30/img/transparent.gif);" class="Map" id="area_image">
							<img src="http://193.164.197.30/img/transparent.gif" alt="" usemap="#france_map">	
						</div>	
					</div>

le div ayant une image transparente de même taille que la carte de france et utilisant également le même map.

quelle que soit la méhode que tu choisisses n'oublie pas de faire un preload des images...

**nico72** · 07/08/2010, 11h05

Oui, bien bur pour le preload

Excuses moi mais je n ai pas tres bien compris ton dernier message.

Cela m interesses beaucoup, est ce que tu pourrais m expliquer a nouveau stp ?

**SpaceFrog** · 07/08/2010, 11h16

le preload ...

il s'agit de précharger les images de sorte que lorsque tu vas les attribuer en background ou en src sur la page il n'aille pas les chercher sur le serveur et causer ainsi un délai

Code :

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

1
2
3
4
5
6
7
var preloader=new Array();
 
preloader[0]=new Image();
preloader[0].src='dossier/image1.gif'
preloader[1]=new Image();
preloader[2].src='dossier/image1.gif'
.../...

et l'attribution

Code :

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

mon image.src=preloader[0].src

Pour plus de clarté tu peux faire un array littéral:

Code :

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

1
2
3
4
5
6
7
var preloader=new Array();
 
preloader['ain']=new Image();
preloader['ain'].src='dossier/ain.gif'
preloader['aisne']=new Image();
preloader['aisne'].src='dossier/image1.gif'
.../...

**nico72** · 07/08/2010, 12h29

Merci encore

Je ne parlais pas du preload mais de tes explications concernant la maniere dont etait creee la carte le boncoin.

Ca m interesse parceque je voudrai arriver au meme resultat pour un projet perso qui me tient a coeur

**SpaceFrog** · 07/08/2010, 13h18

Toutes les images ont la même taille ...

voir en exemple la carte globale...
et un département entièrement détouré sur fond transparent

le map utilisé est le le même un seul map pour toutes les images; et une image par département
plus la carte globale plus une image transparente de même taille

**nico72** · 07/08/2010, 13h31

ok

Je vais me tourner vers cette solution qui me semble assez pratique a mettre en oeuvre.

Merci pour tout

A+

**SpaceFrog** · 07/08/2010, 15h18

Elle est certes plus simple à mettre en oeuvre, mais les images étant plus grandes, leur temps de chargement sera supérieur.
Je ne sais pas si tu as remarqué sur le boncoin, au debut les regions ne s'affichent pas immédiatement.
Dans ton cas de figure tu auras beaucoup plus d'images si tu découpe tous les départements ! Donc avant que la carte ne soit entièrement prête à être utilisée il faudra encore plus de temps...

L'avantage de la solution avec le département ajusté dans un cadre transparent au plus juste est que les images seront beaucoup moins volumineuses et leu temps de chargement moindre.

**nico72** · 07/08/2010, 15h27

Donc, si j ai bien compris, tu me proposes d utiliser ta methode avec les coordonnees des points les plus a gauche et les plus en haut (toujours avec un preload des images) ?

Le probleme, c est que vu mes faibles connaissances en js, ça me semble difficile (mais intéréssant).

Aurais tu un tuto sur le sujet ?

Comment "parser" les coordonnees, les recuperer, les utiliser ?

**SpaceFrog** · 07/08/2010, 18h28

je t'ai donné le code au dessus ....

**nico72** · 07/08/2010, 20h59

ok, je m'y attelle et poserai des questions si necessaire

Encore merci pour ton aide

**SpaceFrog** · 07/08/2010, 21h07

raidement:

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

**SpaceFrog** · 07/08/2010, 21h10

raidement:

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
 
function pos(poly){
        // poly = coords de l'area, paires de coordonnées avec séparateur ,
	poly=poly.split(','); // on splitte pour recupérer un array
	// creation de deux arrays pour recupérer d'un coté les top et de l'autre les left
       var even=new Array();
	var odd=new Array();
	var i=-2;
         //onboucle sur les elements de l'array par pas de deux  
	while(poly[i=i+2]){
		even.push(+poly[i]); //on mets les pairs dans even
		odd.push(+poly[i+1]);// les impairs dans odd
	}
 
	even.sort(numAsc)  // on tire numériquement les pairs par ordre croissant
	odd.sort(numAsc)   // ontire numériquement les impairs par ordre croissant
 
      //les plus petites valeurs de even et de odd sont à l'indice 0
 
	alert('top ='+even[0] +'px\n\n' + 'left='+odd[0]+'px')
	}
 
function numAsc(a, b){
  return (+a > +b)? 1:(+a < +b)?-1:0;
}

**SpaceFrog** · 08/08/2010, 09h32

ceci dit ...

en y repensant bien, tu risques avec ma méthode d'avoir un souci de mouseover

en effet l'image découpée venant au dessus de la carte de france, il faudrait gérée la zone transparente en areas des départements limitrophes. Cela rique d'être assez complexe

Rollover sur carte decoupee

JavaScript

Discussions similaires

Partager

Partager