[JavaScript] Image map et changement de couleur de l'area au survol [Sources]

SpaceFrog · 23/08/2010, 11h29

Imaginez une carte de France des départements.
Le but: changer la couleur du département survolé.

Ne pouvant influer sur le couleur de background d'un area de map, il faut jouer avec la transparence.

Les bases:
un div avec en image de fond la carte principale initiale.
dans l'exemple: bg.png

dans ce div une image entièrement transparente de même dimensions qui supportera le map.
dans l'exemple 0.png

le map avec les polygones pour chaque zone

puis une image de même dimension pour chaque area avec juste la zone colorisée et le reste transparent
dans l'exemple 2.png, 3.png et 4.png

Le principe:
Lors du survol d'un area, on modifie le src de l'image transparente pour lui appliquer le src de la zone colorée correspondante.
Sur le onmouseout on retablit le src de l'image transparente.

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nouvelle page 2</title>
<script type="text/javascript">
function swapPic(zone,nr){
var pic=document.getElementById('hovered')
pic.src='Areas/'+nr+'.png'
zone.onmouseout=function(){pic.src='Areas/0.png'}
}
</script>
<style type="text/css">
img {border:0;}
</style>
</head>
<body>
<div id="pic" style="height: auto; width: auto; background-image: url('Areas/bg.png'); background-repeat: no-repeat">
<img id="hovered" src="Areas/0.png" usemap="#Map" width="100" height="100" />
<map name="Map">
<area href="#" onmouseover="swapPic(this,2)" shape="polygon" coords="20, 64, 13, 51, 14, 34, 24, 19, 38, 12, 56, 13, 69, 21, 79, 41, 75, 54, 71, 57, 55, 54, 39, 57">
<area href="#" onmouseover="swapPic(this,3)" shape="polygon" coords="22, 68, 40, 57, 56, 57, 71, 58, 66, 67, 51, 75, 33, 74">
<area href="#" onmouseover="swapPic(this,4)" shape="polygon" coords="16, 69, 15, 79, 22, 88, 36, 95, 51, 96, 76, 93, 86, 85, 90, 76, 90, 67, 84, 61, 77, 59, 70, 68, 57, 76, 37, 78, 28, 73, 19, 68"></map>
</div>
</body>
</html>

Les images jointes sont à placer dans un répertoire nommé Areas

Les limites de ce système résident dans la taille et le nombre des images nécessaires.
Prévoir un preload des images.

Page de démo

_

RomainVALERI · 24/08/2010, 14h38

Je n'utilise pas beaucoup les <map>, mais le principe que tu présentes est élégant et efficace ^^

merci SF

kpuche · 02/09/2010, 10h07

Bonjour,
Tout d'abord merci beaucoup pour le partage de ce code, très clair, très simple et très efficace ! J'ai longtemps cherché un moyen "propre" d'afficher un hover au survol d'un area et n'avais jamais trouvé de solution aussi satisfaisante.

J'ai cependant un souci pour l'adapter à ce que je veux en faire... Petit résumé.
Je souhaite faire une carte "dynamique" pour un jeu de rôle. Le monde est divisé en zone (55 pour être précis, mais le nombre importe peu) qui peuvent être détenues par 4 "factions" différentes et je voudrais faire la chose suivante : j'aimerais que l'ensemble des images à superposer se chargent automatiquement au chargement de la page et non pas au survol de chacun des <area>. Un genre de carte de situation stratégique, si vous me suivez...
J'ai réussi à le faire en déplaçant la fonction swapPic dans mon <body> avec la fonction onload="", mais je ne sais pas comment procéder pour que le script m'affiche en superposition TOUTES les images en même temps, pas une seule...
A terme, les zones à afficher seront gérée en php/mysql pour pouvoir rapidement modifier et afficher la couleur d'une zone en fonction de la faction à laquelle elle appartient.

Pour le moment, j'en suis là :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carte test</title>
<script type="text/javascript">
function swapPic(zone,nr){
var pic=document.getElementById('hovered')
pic.src=''+nr+'.png'
/*zone.onmouseout=function(){pic.src='map0.png';UnTip()}*/
}
</script>
</head>
 
<body onload="swapPic(this,1)">
<script type="text/javascript" src="infobulles.js"></script>
<div id="pic" style="background:url(map.jpg) no-repeat; height:916px; width:1375px;">
<img id="hovered" usemap="#Map" src="map0.png" border="0" alt="carte" />
<map name="Map" id="Map">
  <area onmouseover="swapPic(this,2);Tip('<strong>Zone 1</strong><br />Actuellement sous le contrôle des schtroumpfs')" onmouseout="swapPic(this,1);UnTip()" shape="poly" coords="520,185,556,186,587,192,613,186,638,200,635,221,608,237,592,231,579,257,566,265,539,257,510,226,502,210" href="#" alt="zone1" />
</map>
</div>
</body>
</html>

Une petite aide serait la bienvenue, je suis un grand débutant en js et je ne sais pas par où commencer

D'avance merci !

SpaceFrog · 03/09/2010, 20h25

si tu regardes les sources de la page demo, les images sont preloadées ...

SpaceFrog · 08/09/2010, 09h53

En complément de ce script je joins un petit javascript qui permet de convertir les coordonnées au format svg que l'on peut recupérer avec gimp en coords html pour areras:

Dans gimp:
on selectionne une zone avec l'outil selection contigüe (baguette magique)
puis dans le menu selection > "vers chemin"
On affiche alors la fenetre des chemins:
fenêtre > fenêtres ancrables > chemins
Puis click droit sur le chemin créé et choisir exporter
donner un nom au fichier et enregistrer.

on obtient un svg comme ceci

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
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 
<svg xmlns="http://www.w3.org/2000/svg"
     width="5.55486in" height="4.01339in"
     viewBox="0 0 400 289">
  <path id="Sélection#1"
        fill="none" stroke="black" stroke-width="1"
        d="M 196.32,89.09
           C 196.32,89.09 212.32,73.00 212.32,73.00
             213.89,70.99 216.24,67.07 218.21,65.76
             221.98,63.22 225.51,65.82 225.75,70.00
             226.04,75.15 221.17,80.16 218.35,84.00
             215.32,88.12 215.05,90.23 212.79,94.00
             212.79,94.00 204.00,106.00 204.00,106.00
             201.65,109.32 196.41,116.46 199.10,120.69
             201.24,124.06 204.93,121.71 209.90,126.23
             215.06,130.92 214.12,135.36 218.14,138.26
             220.53,139.99 225.61,140.26 229.00,141.44
             242.86,146.25 241.71,143.79 257.00,152.14
             262.63,155.22 275.91,160.01 275.23,167.96
             274.65,174.76 267.44,172.02 264.00,169.71
             256.58,164.73 243.61,157.96 235.00,155.62
             232.25,154.90 226.92,153.15 224.69,155.62
             222.72,157.76 224.64,160.50 222.74,166.00
             222.74,166.00 219.30,174.00 219.30,174.00
             217.86,180.58 219.38,198.70 219.91,206.00
             220.32,211.55 223.13,222.21 215.98,224.34
             212.14,225.49 209.85,222.37 209.23,219.00
             209.23,219.00 208.00,193.00 208.00,193.00
             207.94,187.81 207.32,184.97 206.00,180.00
             203.27,181.17 195.66,184.20 193.00,184.38
             190.02,184.58 185.49,183.16 182.17,185.02
             178.74,186.95 176.05,192.70 173.91,196.00
             173.91,196.00 159.38,216.00 159.38,216.00
             157.33,219.13 154.04,226.32 149.15,223.92
             144.50,221.64 146.54,215.57 148.02,212.00
             150.51,206.01 158.09,198.04 165.00,182.00
             165.00,182.00 155.00,179.28 155.00,179.28
             152.66,178.35 151.04,176.96 149.00,175.56
             142.27,170.94 137.76,168.65 136.00,160.00
             125.24,160.11 114.95,166.37 106.00,171.91
             101.97,174.41 96.07,179.68 91.04,178.53
             86.54,177.49 82.95,171.29 92.02,166.26
             105.92,158.55 117.46,151.93 133.00,148.00
             131.47,142.60 132.22,135.34 133.91,130.00
             133.91,130.00 135.68,125.00 135.68,125.00
             136.40,121.14 133.03,116.62 131.42,113.00
             125.49,99.60 114.49,89.77 109.41,78.00
             106.50,71.24 111.18,67.73 114.91,68.84
             118.54,69.93 122.32,77.74 124.51,81.00
             129.44,88.35 135.00,95.25 140.71,102.00
             142.31,103.89 145.46,108.33 147.17,109.58
             151.05,112.44 157.41,108.75 162.00,108.01
             170.87,106.59 176.66,107.46 185.00,111.00
             186.94,104.14 191.58,94.39 196.32,89.09 Z" />
</svg>

Voici un petit outil magique qui va vous permette de récupérer uniquement les éléments nécessaires aux coordonnées pour un area html:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<title>Gimp to Area Coords</title>
</head>
<body>
<h1>Area Coords converter by Spacefrog</h1>
<form name="generateCoords" action="javascript:void(0);" method="get" onsubmit="return ToCoords();" enctype="application/x-www-form-urlencoded" >
1 -Collez le resultat de l'exportation du svg :<br/>
<textarea name="saisie" id="saisie" cols="80" rows="10" ></textarea>
<br/><br/>
<input type="submit" value="2 - Cliquez ici" onclick="ToCoords();return false"/><br /><br/>
3 - copiez les coordonnées générées : <br/>
<input type="text" id="res" value="" style="width:100%;"/>
</form>
</body>
</html>

Copier le contenu du fichier svg dans le textarea
cliquer sur le bouton

On pourrait imaginer également renseigner le textarea directement à partir du fichier avec un ajax (ou le contenu d'un balise object) ...

LIMITATIONS:
Dans cette version il n'est prévu d'exporter qu'une zone à la fois.
Les zone ne doivent pas contenir de "trous"
La précision des zones est de l'ordre du Math.floor, puisque les coordonnées sont tronquées de leur décimales. On peut envisager un split et un round ...

SpaceFrog · 08/09/2010, 13h35

Version avec arrondis (Math.round) sur les coordonnées:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
html,body  {
    height:100%;
    width:100%;
   }
body {
    margin:0 0 0 20px;
    padding:0;
    background-color: #82CC8C;
    font-family:verdana;
    font-weight:bold;
}
</style>
<script type="text/javascript">
/* Script by Spacefrog 2010
   Title: From SVG to html area coords
    l'auteur décline toutes responsablitiés
*/  
function ToCoords(){
    chaine=document.getElementById('saisie').value;
    var brutcoords=chaine.match(/M[^\n]*\n\s+C\s+([^Z]+)/);
    tabcoords=brutcoords[1].split(/[^0-9.,]+/)
    tabcoords.pop()
    tabcoords=tabcoords.join(',').split(',')
    var i=-1
    while(tabcoords[++i]){
	tabcoords[i]=Math.round(tabcoords[i])
    }
    document.getElementById('res').value='coords="'+tabcoords.join(',')+'"'
    return false;
}
 
</script>
 
<title>Gimp to Area Coords</title>
</head>
<body>
<h1>Area Coords converter by Spacefrog</h1>
<form name="generateCoords" action="javascript:void(0);" method="get" onsubmit="return ToCoords();" enctype="application/x-www-form-urlencoded" >
1 -Collez le resultat de l'exportation du svg :<br/>
<textarea name="saisie" id="saisie" cols="80" rows="10" style="font-family:arial"></textarea>
<br/><br/>
<input type="submit" value="2 - Cliquez ici" onclick="ToCoords();return false"/><br /><br/>
3 - copiez les coordonnées générées : <br/>
<input type="text" id="res" value="" style="width:100%;"/>
</form>
</body>
</html>

SpaceFrog · 09/09/2010, 11h53

Allez hop un peu plus encore !

Imaginez que vous ayez besoin de mapper tous les departements français.
La methode précedente vous permet de le faire pour un departement à chaque fois (une zone contigue selectionée avec gimp).

Que diriez vous de selectionner tous les departement en une fois, c'et a dire avoir plusieurs zones en une fois.

voici ce que retourne une exportation de chemin sous gimp avec 5 zones en même temps :

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
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 
<svg xmlns="http://www.w3.org/2000/svg"
     width="6.24922in" height="6.38809in"
     viewBox="0 0 450 460">
  <path id="Sélection"
        fill="none" stroke="black" stroke-width="1"
        d="M 216.11,68.00
           C 216.11,68.00 216.11,75.00 216.11,75.00
             215.93,77.99 216.36,82.07 212.85,83.33
             210.68,84.08 207.65,82.82 205.00,83.33
             201.54,84.04 199.64,86.76 197.00,87.11
             194.19,87.47 186.39,82.63 184.00,80.88
             181.40,78.99 174.56,75.94 176.74,72.19
             178.04,69.97 188.47,63.73 191.17,63.34
             197.86,62.36 194.69,65.76 207.00,60.11
             211.65,59.83 215.37,63.40 216.11,68.00 Z
           M 135.86,99.00
           C 136.31,95.72 135.22,89.88 137.60,87.42
             141.69,83.16 150.14,91.33 155.00,91.82
             161.00,92.41 166.61,87.41 169.86,87.99
             174.07,88.74 176.00,99.92 170.85,102.98
             169.08,104.03 166.95,103.88 165.00,104.26
             165.00,104.26 157.00,106.29 157.00,106.29
             157.00,106.29 145.00,106.29 145.00,106.29
             139.83,106.46 138.49,108.10 133.00,107.00
             134.04,104.36 135.47,101.84 135.86,99.00 Z
           M 166.00,127.00
           C 157.80,126.85 158.88,124.33 154.00,122.77
             148.31,120.95 139.28,126.83 138.15,118.98
             136.02,104.18 155.17,109.89 158.00,109.81
             162.51,109.68 165.19,107.05 169.00,107.25
             172.98,107.45 180.19,112.82 182.42,116.02
             182.42,116.02 185.35,122.00 185.35,122.00
             186.11,123.61 187.16,125.12 186.99,127.00
             186.70,130.23 181.64,136.46 178.01,135.51
             174.24,134.53 172.71,130.33 172.00,127.00
             172.00,127.00 166.00,127.00 166.00,127.00 Z
           M 117.00,122.69
           C 119.44,123.32 123.38,122.53 124.80,125.31
             125.78,127.26 124.24,131.53 124.11,134.00
             123.74,140.60 126.24,145.22 119.63,150.40
             116.94,152.50 114.09,151.70 111.00,152.39
             106.86,153.32 100.29,158.57 96.60,154.60
             94.35,152.18 95.49,148.32 94.42,145.00
             93.57,142.37 91.57,140.42 91.91,138.02
             92.51,133.80 98.26,132.94 100.70,128.81
             103.68,123.77 101.32,120.00 110.00,117.00
             112.07,119.79 113.43,121.76 117.00,122.69 Z
           M 141.00,126.74
           C 141.00,126.74 149.94,126.16 149.94,126.16
             151.93,126.44 153.16,127.07 153.65,129.15
             154.16,131.32 153.23,134.09 152.24,136.00
             152.24,136.00 147.92,143.00 147.92,143.00
             145.91,147.34 145.13,154.47 139.95,156.39
             136.98,157.48 126.58,155.47 125.89,151.86
             125.39,149.19 128.04,147.46 127.89,142.00
             127.72,135.79 125.22,130.82 131.14,126.19
             135.98,125.19 136.61,126.60 141.00,126.74 Z" />
</svg>

Du coup je me suis amusé a générer directement en une seule fois toutes les areas :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
html,body  {
    height:100%;
    width:100%;
   }
body {
    margin:0 0 0 20px;
    padding:0;
    background-color: #82CC8C;
    font-family:verdana;
    font-weight:bold;
}
#res {border: inset 2px silver;
    background-color:#FFFFFF;
    overflow:auto;
    width:800px;}
</style>
<script type="text/javascript" charset="utf-8">
/* Script by Spacefrog 2010
   Title: From SVG to html area coords
    l'auteur décline toutes responsablitiés
*/
function ToCoords(){
    document.getElementById('res').innerHTML="\<map\>";
    chaine=document.getElementById('saisie').value;
    brutcoords=new Array();
    reg=/C(?=\s\d)([^Z]+)Z/g;
    while(matches=reg.exec(chaine)){
	brutcoords.push(matches[1])
    }
 
 
   var i=-1
    while (brutcoords[++i]){
    brutcoords[i]=brutcoords[i].replace(/(^\s+)|(\s+$)/g,'')
    brutcoords[i]=brutcoords[i].split(/[^0-9.,]+/)
    brutcoords[i]=brutcoords[i].join(',').split(',')
    var j=-1
    while(brutcoords[i][++j]){
	brutcoords[i][j]=Math.round(brutcoords[i][j])
    }
    document.getElementById('res').innerHTML+='&lt;area href="#" alt="zone'+i+'" title="" shape="poly" onclick="" coords="'+brutcoords[i].join(',')+'" /&gt;'+"<br/>";
    }
    return false;
}
</script>
 
<title>Gimp to Area Coords</title>
</head>
<body>
<h1>Area Coords converter by Spacefrog</h1>
<form name="generateCoords" action="javascript:void(0);" method="get" onsubmit="return ToCoords();" enctype="application/x-www-form-urlencoded" >
1 -Collez le resultat de l'exportation du svg :<br/>
<textarea name="saisie" id="saisie" cols="80" rows="10" style="font-family:arial"></textarea>
<br/><br/>
<input type="submit" value="2 - Cliquez ici" onclick="ToCoords();return false"/><br /><br/>
3 - copiez les coordonnées générées : <br/>
<pre id="res"></pre>
</form>
</body>
</html>

SpaceFrog · 09/09/2010, 14h01

J'ai ajouté l'importation du fichier !

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../Script/jquery-1.4.2.min.js"></script>
<style type='text/css'>
html,body  {
    height:100%;
    width:100%;
   }
body {
    margin:0 0 0 20px;
    padding:0;
    background-color: #82CC8C;
    font-family:verdana;
    font-weight:bold;
}
#res {border: inset 2px silver;
    background-color:#FFFFFF;
    overflow:auto;
    width:800px;}
</style>
<script type="text/javascript" charset="utf-8">
/* Script by Spacefrog 2010
   Title: From SVG to html area coords
    l'auteur décline toutes responsablitiés
*/
<!--
function ToCoords(){
    document.getElementById('res').innerHTML='&lt;map name="testmap"&gt;<br/>';
    chaine=document.getElementById('saisie').value;
    brutcoords=new Array();
    reg=/C(?=\s\d)([^Z]+)Z/g;
    while(matches=reg.exec(chaine)){
	brutcoords.push(matches[1])
    }
   var i=-1
    while (brutcoords[++i]){
    brutcoords[i]=brutcoords[i].replace(/(^\s+)|(\s+$)/g,'')
    brutcoords[i]=brutcoords[i].split(/[^0-9.,]+/)
    brutcoords[i]=brutcoords[i].join(',').split(',')
    var j=-1
    while(brutcoords[i][++j]){
	brutcoords[i][j]=Math.round(brutcoords[i][j])
    }
    document.getElementById('res').innerHTML+='&lt;area href="#" alt="zone'+i+'" title="" shape="poly" onclick="" coords="'+brutcoords[i].join(',')+'" /&gt;'+"<br/>";
    }
    document.getElementById('res').innerHTML+='&lt;/map &gt';
    return false;
}
function importSVG(){
thefile=document.getElementById('myfile').value
thefile=thefile.replace(/.*\\/,'')
 $.ajax({
   url: "SVGFiles/"+thefile,
   dataType:  "text" ,
   success: function(data){
  $('#saisie').val(data);
   }
 });
 
}
-->
</script>
<title>Gimp to Area Coords</title>
</head>
<body>
<h1>Area Coords converter by Spacefrog</h1>
<div><input type="file" id="myfile"/><input type='button' onclick="importSVG()" value="importer"/>
<form id="generateCoords" action="javascript:void(0);" method="get" onsubmit="return ToCoords();" enctype="application/x-www-form-urlencoded" >
 <fieldset>
1 - Selectionnez puis importez votre fichier<br/>
ou collez le resultat de l'exportation du svg :<br/>
<textarea name="saisie" id="saisie" cols="80" rows="10" style="font-family:arial"></textarea>
<br/><br/>
<input type="submit" value="2 - Cliquez ici" onclick="ToCoords();return false"/><br /><br/>
3 - copiez les coordonnées générées : <br/>
<pre id="res"></pre>
</fieldset>   
</form></div>
</body>
</html>

Prérequis:
Les fichiers doivent etre dans repertoire nommé SVGFiles au niveau du fichier html

Voilà ! il ne manque plus qu'un peu de rationalisation, mais je ne pense pas aller plus loin ...

SpaceFrog · 09/09/2010, 14h56

petite demo du résultat obtenu:

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type="text/javascript">
function rouge(){
alert('rouge')
}
function jaune(){
alert('jaune')
}
function violet(){
alert('violet')
}
 
</script>
</head>
 
<body>
<img src="test.png" usemap="#testmap"/>
<map name="testmap">
<area href="#" alt="zone0" title="" shape="poly" onclick="rouge()" coords="38,107,39,103,40,99,46,71,64,51,91,42,99,39,104,38,112,38,112,38,122,38,122,38,132,38,143,41,152,46,176,58,192,81,194,107,195,114,196,120,193,127,193,127,187,101,187,101,180,111,169,109,159,109,160,104,162,87,153,90,148,91,147,99,145,103,145,103,141,101,141,101,141,101,127,83,127,83,127,86,127,90,127,92,125,101,118,110,109,112,108,104,107,101,105,93,105,90,103,87,100,86,96,84,93,88,92,92,92,92,92,116,92,116,89,116,84,116,81,115,70,113,68,104,64,95,64,95,64,118,64,118,64,118,59,133,59,133,56,141,56,147,49,153,42,141,38,125,38,111" />
<area href="#" alt="zone1" title="" shape="poly" onclick="jaune()" coords="48,156,50,159,68,162,74,163,82,164,87,160,90,157,94,152,95,149,96,146,96,139,96,135,96,135,96,109,96,109,96,102,93,93,100,89,105,101,105,113,107,126,108,129,110,140,112,141,114,144,120,143,123,143,126,143,129,143,132,141,134,140,135,133,136,130,136,130,147,107,147,107,149,102,150,95,156,93,156,102,157,115,155,123,153,130,147,138,147,144,147,147,153,157,156,158,160,159,165,156,168,154,168,154,194,146,194,146,198,145,206,141,209,146,212,151,199,155,196,156,196,156,171,165,171,165,168,167,164,168,162,171,159,175,159,181,159,185,159,194,165,191,172,194,175,195,178,197,181,199,181,199,190,200,190,200,193,202,195,204,199,205,203,206,205,206,209,207,217,210,217,217,214,218,211,220,202,218,199,217,191,216,194,216,187,214,183,213,169,211,165,211,165,211,160,211,160,211,158,211,155,211,153,212,148,213,142,218,144,224,144,224,158,250,158,250,158,250,161,262,161,262,161,262,167,273,167,273,168,275,168,279,164,278,159,276,156,263,153,258,153,258,137,234,137,234,134,228,135,223,129,219,124,216,114,217,108,217,106,217,102,217,100,218,94,220,90,230,86,235,86,235,73,253,73,253,71,256,64,268,59,266,57,265,58,261,59,259,60,255,63,252,65,249,65,249,69,242,69,242,74,233,76,233,82,227,85,223,92,212,93,207,93,202,90,199,89,194,89,190,89,186,87,182,85,176,73,174,67,172,50,169,27,168,11,161,14,155,21,155,27,155" />
<area href="#" alt="zone2" title="" shape="poly" onclick="jaune()" coords="139,110,136,114,135,117,132,123,129,130,128,137,128,137,116,137,116,137,116,137,113,118,113,118,113,118,122,109,122,109,122,109,130,95,130,95,133,97,139,102,139,107" />
<area href="#" alt="zone3" title="" shape="poly" onclick="violet()" coords="178,112,185,110,185,110,188,130,191,130,194,139,180,142,171,147,158,152,156,150,154,146,154,143,154,140,158,133,159,130,162,124,162,119,162,113,162,113,178,112,178,112" />
<area href="#" alt="zone4" title="" shape="poly" onclick="jaune()" coords="90,131,94,156,77,157,74,157,71,157,68,156,63,155,61,155,56,153,56,153,60,143,60,143,65,130,67,125,67,111,77,118,77,120,90,120" />
<area href="#" alt="zone5" title="" shape="poly" onclick="jaune()" coords="169,173,173,171,176,170,176,170,200,162,200,162,205,160,211,155,217,157,208,163,198,171,193,180,188,188,192,194,184,193,176,192,178,187,166,187,166,184,166,178,167,175" />
<area href="#" alt="zone6" title="" shape="poly" onclick="jaune()" coords="40,173,46,176,51,177,51,177,72,180,72,180,75,181,79,181,80,184,82,185,83,188,83,191,75,191,64,188,57,192,51,194,46,200,41,205,40,191,30,185,36,178" />
<area href="#" alt="zone7" title="" shape="poly" onclick="jaune()" coords="126,220,125,229,125,229,125,229,123,229,123,229,123,229,119,220,119,220,119,220,126,220,126,220" />
</map>
</html>

a partir du fichier suivnat généré par gimp après selection des zones au moyen de la baguette magique sur l'image en pièce jointe :

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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 
<svg xmlns="http://www.w3.org/2000/svg"
     width="4.16615in" height="4.16615in"
     viewBox="0 0 300 300">
  <path id="Sélection"
        fill="none" stroke="black" stroke-width="1"
        d="M 38.04,111.00
           C 38.19,107.19 39.22,102.78 40.00,99.00
             45.78,71.15 64.18,51.05 91.00,42.00
             98.79,39.37 103.72,38.01 112.00,38.00
             112.00,38.00 122.00,38.00 122.00,38.00
             131.89,38.12 143.18,41.40 152.00,45.81
             175.67,57.64 191.63,80.67 194.07,107.00
             194.74,114.20 196.03,119.91 193.00,127.00
             193.00,127.00 187.00,101.00 187.00,101.00
             180.36,111.06 169.42,109.00 159.00,109.00
             160.12,104.39 162.14,86.96 153.02,89.66
             148.03,91.13 146.66,98.67 145.00,103.00
             145.00,103.00 141.33,101.28 141.33,101.28
             141.33,101.28 126.81,83.00 126.81,83.00
             127.00,85.63 127.13,89.51 126.81,92.00
             124.78,101.07 118.28,110.14 109.00,112.00
             107.99,104.34 107.38,100.54 105.33,93.00
             104.52,90.02 103.24,86.65 99.96,85.66
             95.71,84.37 93.08,88.41 92.17,92.00
             92.17,92.00 92.17,116.00 92.17,116.00
             88.89,116.00 83.87,116.19 81.00,115.44
             70.26,112.65 68.41,103.52 63.87,95.00
             63.87,95.00 63.87,118.00 63.87,118.00
             63.87,118.00 58.54,133.00 58.54,133.00
             56.32,141.09 55.73,146.85 49.00,153.00
             42.18,141.02 37.50,124.88 38.04,111.00 Z
           M 27.00,155.09
           C 48.36,156.30 50.23,159.24 68.00,162.39
             74.16,163.48 81.94,164.07 86.96,159.77
             89.64,157.48 93.89,152.32 95.11,149.00
             96.35,145.65 96.00,138.79 96.00,135.00
             96.00,135.00 96.00,109.00 96.00,109.00
             95.92,102.11 92.65,93.13 100.00,89.00
             105.39,101.49 104.81,113.04 107.08,126.00
             107.58,128.81 109.90,139.74 111.59,141.40
             113.81,143.57 119.97,143.01 123.00,143.00
             125.78,142.99 129.43,143.29 131.69,141.40
             133.72,139.70 135.26,132.89 136.32,130.00
             136.32,130.00 146.91,107.00 146.91,107.00
             149.16,101.52 149.85,95.02 156.00,93.00
             156.00,101.89 156.84,114.73 154.61,123.00
             152.59,130.49 147.12,137.78 147.15,144.00
             147.17,147.41 152.88,157.26 156.13,158.31
             159.57,159.42 164.89,155.78 168.00,154.32
             168.00,154.32 194.00,145.60 194.00,145.60
             197.58,144.51 206.27,140.86 208.92,145.60
             211.86,150.50 199.39,155.33 196.00,156.48
             196.00,156.48 171.00,165.39 171.00,165.39
             167.63,166.95 164.04,168.07 161.72,171.19
             159.13,174.68 158.84,180.78 159.02,185.00
             159.40,194.11 164.68,190.91 172.00,194.06
             175.16,195.42 177.56,197.49 181.00,198.52
             181.00,198.52 190.00,200.49 190.00,200.49
             193.38,201.87 194.94,203.93 199.00,205.20
             202.53,206.30 205.34,205.68 209.00,207.23
             216.50,210.39 217.24,216.71 213.69,218.40
             211.08,219.64 202.26,217.55 199.00,217.15
             191.26,216.21 193.73,216.23 187.00,214.09
             182.90,212.79 169.47,211.06 165.00,211.00
             165.00,211.00 160.00,211.00 160.00,211.00
             157.81,211.01 155.10,210.97 153.00,211.57
             148.00,213.00 142.32,218.39 143.92,224.00
             143.92,224.00 158.30,250.00 158.30,250.00
             158.30,250.00 161.28,262.00 161.28,262.00
             161.28,262.00 166.93,273.00 166.93,273.00
             167.77,275.38 167.71,279.36 164.03,277.83
             159.06,275.76 155.81,263.03 152.88,258.00
             152.88,258.00 137.30,234.00 137.30,234.00
             134.44,228.40 135.14,222.57 128.98,218.93
             124.42,216.24 113.54,216.99 108.00,217.00
             105.63,217.00 102.22,216.87 100.04,217.74
             94.18,220.08 90.15,230.02 86.45,235.00
             86.45,235.00 72.76,253.00 72.76,253.00
             70.72,256.21 64.26,268.17 59.43,265.83
             56.80,264.56 57.62,261.05 58.55,259.00
             60.20,255.31 63.07,252.35 65.25,249.00
             65.25,249.00 69.17,242.00 69.17,242.00
             74.45,233.27 76.33,233.41 81.79,227.00
             84.89,223.36 92.34,211.59 92.79,207.00
             93.29,201.98 90.18,198.75 89.33,194.00
             88.66,190.28 89.20,185.69 87.49,182.09
             84.68,176.17 73.03,173.60 67.00,172.46
             49.59,169.17 27.41,167.98 11.00,161.00
             14.00,155.38 21.07,154.76 27.00,155.09 Z
           M 139.11,107.00
           C 139.32,110.03 136.34,114.26 134.97,117.00
             131.82,123.29 128.64,129.94 128.00,137.00
             128.00,137.00 116.00,137.00 116.00,137.00
             116.00,137.00 112.64,118.09 112.64,118.09
             112.64,118.09 121.90,108.96 121.90,108.96
             121.90,108.96 130.00,95.00 130.00,95.00
             133.41,97.49 138.79,102.48 139.11,107.00 Z
           M 178.00,112.05
           C 178.00,112.05 185.00,110.00 185.00,110.00
             187.70,130.02 191.41,130.12 194.00,139.00
             180.10,141.80 170.72,146.91 158.00,152.00
             156.39,149.52 153.80,146.03 153.78,143.00
             153.75,139.88 157.76,133.27 159.12,130.00
             161.54,124.22 161.98,119.16 162.00,113.00
             162.00,113.00 178.00,112.05 178.00,112.05 Z
           M 90.00,120.00
           C 90.00,131.43 93.85,155.99 77.00,156.96
             73.87,157.14 71.06,156.78 68.00,156.20
             63.22,155.28 60.58,154.50 56.00,153.00
             56.00,153.00 59.94,143.00 59.94,143.00
             64.77,130.36 67.00,124.55 67.00,111.00
             77.22,118.22 76.59,119.96 90.00,120.00 Z
           M 167.02,175.39
           C 168.60,172.91 173.32,171.28 176.00,170.20
             176.00,170.20 200.00,161.78 200.00,161.78
             205.45,160.02 211.13,154.88 217.00,157.00
             208.49,163.05 198.23,170.85 192.95,180.00
             188.44,187.83 191.58,193.76 183.98,192.66
             176.08,191.51 178.02,187.12 166.00,187.00
             166.00,184.13 165.56,177.67 167.02,175.39 Z
           M 35.82,178.23
           C 39.83,173.25 45.76,175.74 51.00,176.56
             51.00,176.56 72.00,180.13 72.00,180.13
             74.66,180.80 78.51,181.49 80.44,183.51
             82.34,185.49 82.63,188.42 83.00,191.00
             75.15,190.64 64.41,188.32 57.00,191.53
             50.75,194.24 45.89,200.37 41.00,205.00
             39.74,191.07 30.07,185.35 35.82,178.23 Z
           M 126.00,220.00
           C 126.00,220.00 125.00,229.00 125.00,229.00
             125.00,229.00 123.00,229.00 123.00,229.00
             123.00,229.00 119.00,220.00 119.00,220.00
             119.00,220.00 126.00,220.00 126.00,220.00 Z" />
</svg>

Il faut que les zones soient délimitées par un trait ...

vodiem · 20/09/2010, 00h00

salut RomainVALERI, kpuche et SpaceFrog,

j'ai regardé avec intérêt ta méthodologie pour obtenir un map.
très intéressant.

bon maintenant passons aux critiques: ^^
outre la p'tite erreur sur zone1 qui est violet et pas jaune, j'ai remarqué qq "points" qui me chagrinent.
après recherche sur le sujet voici mon avis:
tu convertis l'ensemble des coordonnées en point de polygone, or il s'agit pour la plupart, de points de contrôles: les points ne sont pas forcement à proximité de la courbe.
tu limites et restreint un peu trop sur une seul définition de courbe, ce qui bloque rapidement l'algo de conversion.
de plus cela ne gère pas une forme simple: le polygone.
je dis cela parce qu'il serait plus sur d'avoir une meilleur approximation de l'area à partir d'une forme polygonale.
cela ne traite pas le transform, simplication, defs et beaucoup d'autres définitions du format svg...
bon on peut pas te tenir rigueur : le format est assez complexe.

cela dit je pense que le choix de prendre les courbes ne me parait pas judicieux.

puisqu'il s'agit de svg soit de l'xlm j'ai regardé du côté xslt pour l'obtention d'un map et j'ai été surpris de ne pas trouver de feuille de style.

d'ailleurs il est intéressant de faire remarquer qu'il est possible de faire aussi cette exemple directement avec le format svg.

voici donc une autre proposition à base du svg:
soit définir des chemins à partir de gimp
soit vectoriser l'image sous inkscape
ensuite dans inkscape: convertir l'ensemble des courbes en polygones : Extensions/Modification de chemin/Aplatir les courbes de Bézier valeur (par exemple) 2
utiliser inkscapemap
attention :
-il faut mettre l'unité en px et les dimensions de la page en valeur entière.
-paramétrer le format de sortie: Préférence d'Inkscape/Sortie SVG: retirer coordonnées relatives et cocher imposer les commandes répétitives.
-enregister sous le format "SVG simple"
-mais cela ne prémuni pas des pb du aux transforms (scale, rotate, translate...) que je résous en faisant un copie/coller sur place.
-certaine forme n'apparaissait pas j'ai résolu en leur appliquant une union.

cette application, bien que pas très stable, à l'avantage de pouvoir définir plusieurs zones et par l'union de plusieurs polygones définir une unique zone.

cela dit une petite adaptation de ton code pourrait faire aussi l'affaire. une fois la segmentation des courbes effectuées.

je n'ai pas trouvé d'outil qui permettrait de visualiser les areas directement sur l'image dans un navigateur, le plus proche est ce "mapper".
pour test:
une fois téléchargé, en remplaçant leur exemple par le code ci-dessous et en incluant l'image test.png dans le dossier:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <link rel="bookmark" type="text/html" title="Mapper.js" href="http://www.netzgesta.de/mapper/">
    <script type="text/javascript" src="wz_jsgraphics.js"></script>
    <script type="text/javascript" src="cvi_map_lib.js"></script>
 
<script type="text/javascript">
<!--
function ById(v) {return(document.getElementById(v));}
 
window.onload = function() {
    cvi_map.add(ById('parliament_floorplan'),{opacity: 50, areacolor: '#0099ff', noborder: true});
}
-->
</script>
 
</head>
<body>
<img id="parliament_floorplan" src="test.png" usemap="#testmap"/>
<map name="testmap">
<area href="#" alt="zone0" title="" shape="poly" onclick="rouge()" coords="38,107,39,103,40,99,46,71,64,51,91,42,99,39,104,38,112,38,112,38,122,38,122,38,132,38,143,41,152,46,176,58,192,81,194,107,195,114,196,120,193,127,193,127,187,101,187,101,180,111,169,109,159,109,160,104,162,87,153,90,148,91,147,99,145,103,145,103,141,101,141,101,141,101,127,83,127,83,127,86,127,90,127,92,125,101,118,110,109,112,108,104,107,101,105,93,105,90,103,87,100,86,96,84,93,88,92,92,92,92,92,116,92,116,89,116,84,116,81,115,70,113,68,104,64,95,64,95,64,118,64,118,64,118,59,133,59,133,56,141,56,147,49,153,42,141,38,125,38,111" />
<area href="#" alt="zone1" title="" shape="poly" onclick="violet()" coords="48,156,50,159,68,162,74,163,82,164,87,160,90,157,94,152,95,149,96,146,96,139,96,135,96,135,96,109,96,109,96,102,93,93,100,89,105,101,105,113,107,126,108,129,110,140,112,141,114,144,120,143,123,143,126,143,129,143,132,141,134,140,135,133,136,130,136,130,147,107,147,107,149,102,150,95,156,93,156,102,157,115,155,123,153,130,147,138,147,144,147,147,153,157,156,158,160,159,165,156,168,154,168,154,194,146,194,146,198,145,206,141,209,146,212,151,199,155,196,156,196,156,171,165,171,165,168,167,164,168,162,171,159,175,159,181,159,185,159,194,165,191,172,194,175,195,178,197,181,199,181,199,190,200,190,200,193,202,195,204,199,205,203,206,205,206,209,207,217,210,217,217,214,218,211,220,202,218,199,217,191,216,194,216,187,214,183,213,169,211,165,211,165,211,160,211,160,211,158,211,155,211,153,212,148,213,142,218,144,224,144,224,158,250,158,250,158,250,161,262,161,262,161,262,167,273,167,273,168,275,168,279,164,278,159,276,156,263,153,258,153,258,137,234,137,234,134,228,135,223,129,219,124,216,114,217,108,217,106,217,102,217,100,218,94,220,90,230,86,235,86,235,73,253,73,253,71,256,64,268,59,266,57,265,58,261,59,259,60,255,63,252,65,249,65,249,69,242,69,242,74,233,76,233,82,227,85,223,92,212,93,207,93,202,90,199,89,194,89,190,89,186,87,182,85,176,73,174,67,172,50,169,27,168,11,161,14,155,21,155,27,155" />
<area href="#" alt="zone2" title="" shape="poly" onclick="jaune()" coords="139,110,136,114,135,117,132,123,129,130,128,137,128,137,116,137,116,137,116,137,113,118,113,118,113,118,122,109,122,109,122,109,130,95,130,95,133,97,139,102,139,107" />
<area href="#" alt="zone3" title="" shape="poly" onclick="jaune()" coords="178,112,185,110,185,110,188,130,191,130,194,139,180,142,171,147,158,152,156,150,154,146,154,143,154,140,158,133,159,130,162,124,162,119,162,113,162,113,178,112,178,112" />
<area href="#" alt="zone4" title="" shape="poly" onclick="jaune()" coords="90,131,94,156,77,157,74,157,71,157,68,156,63,155,61,155,56,153,56,153,60,143,60,143,65,130,67,125,67,111,77,118,77,120,90,120" />
<area href="#" alt="zone5" title="" shape="poly" onclick="jaune()" coords="169,173,173,171,176,170,176,170,200,162,200,162,205,160,211,155,217,157,208,163,198,171,193,180,188,188,192,194,184,193,176,192,178,187,166,187,166,184,166,178,167,175" />
<area href="#" alt="zone6" title="" shape="poly" onclick="jaune()" coords="40,173,46,176,51,177,51,177,72,180,72,180,75,181,79,181,80,184,82,185,83,188,83,191,75,191,64,188,57,192,51,194,46,200,41,205,40,191,30,185,36,178" />
<area href="#" alt="zone7" title="" shape="poly" onclick="jaune()" coords="126,220,125,229,125,229,125,229,123,229,123,229,123,229,119,220,119,220,119,220,126,220,126,220" />
</map>
 
<MAP name="map1">
<AREA SHAPE="poly" ALT="Rouge" TITLE="Rouge" onclick="rouge()" href="#" COORDS="111,38, 91,42, 72,50, 57,63, 46,79, 40,99, 38,111, 40,132, 49,153, 55,143, 58,133, 63,118, 63,95, 70,107, 74,112, 81,115, 92,116, 92,92, 94,87, 99,85, 103,88, 105,93, 108,112, 120,104, 126,92, 126,83, 141,101, 144,103, 147,95, 153,89, 157,90, 159,96, 158,109, 174,108, 181,106, 186,101, 192,127, 194,117, 194,107, 189,88, 180,71, 168,56, 151,45, 137,40, 121,38, 111,38" />
<AREA SHAPE="poly" ALT="Violet" TITLE="Violet" onclick="violet()" href="#" COORDS="100,89, 96,92, 95,98, 96,109, 96,135, 95,149, 86,159, 77,163, 68,162, 48,158, 27,155, 17,155, 11,161, 38,168, 67,172, 78,175, 87,182, 89,194, 92,207, 81,227, 69,242, 65,249, 58,259, 57,262, 59,265, 63,265, 67,261, 72,253, 86,235, 92,225, 100,217, 107,217, 118,217, 128,218, 134,225, 137,234, 152,258, 157,269, 164,277, 167,276, 166,273, 161,262, 158,250, 143,224, 145,216, 152,211, 159,211, 164,211, 186,214, 198,217, 213,218, 215,213, 209,207, 198,205, 189,200, 180,198, 171,194, 162,191, 160,189, 159,185, 161,171, 170,165, 195,156, 204,152, 208,149, 208,145, 201,143, 193,145, 167,154, 162,157, 156,158, 150,152, 147,144, 150,134, 154,123, 155,93, 149,98, 146,107, 136,130, 131,141, 122,143, 111,141, 107,126, 104,107, 100,89" />
<AREA SHAPE="poly" ALT="Jaune" TITLE="Jaune" onclick="jaune()" href="#" COORDS="129,95, 121,108, 112,118, 115,137, 127,137, 134,117, 139,107, 135,100, 129,95" />
<AREA SHAPE="poly" ALT="Jaune" TITLE="Jaune" onclick="jaune()" href="#" COORDS="184,110, 177,112, 161,113, 159,130, 153,143, 157,152, 175,144, 193,139, 189,128, 184,110" />
<AREA SHAPE="poly" ALT="Jaune" TITLE="Jaune" onclick="jaune()" href="#" COORDS="67,111, 65,127, 59,143, 56,153, 68,156, 77,156, 86,152, 89,142, 90,120, 77,118, 67,111" />
<AREA SHAPE="poly" ALT="Jaune" TITLE="Jaune" onclick="jaune()" href="#" COORDS="217,157, 208,157, 199,161, 175,170, 167,175, 165,187, 176,189, 183,192, 187,192, 189,189, 192,180, 203,167, 217,157" />
<AREA SHAPE="poly" ALT="Jaune" TITLE="Jaune" onclick="jaune()" href="#" COORDS="42,175, 35,178, 34,183, 35,189, 41,205, 57,191, 69,189, 83,191, 80,183, 72,180, 51,176, 42,175" />
<AREA SHAPE="poly" ALT="Jaune" TITLE="Jaune" onclick="jaune()" href="#" COORDS="118,220, 122,229, 124,229, 125,220, 118,220" />
</MAP>
</body>
</html>

qui représente les deux maps: par conversion des points de controles en points et par conversion en polygones.
on peut ainsi tester les différences de zones.

SpaceFrog · 20/09/2010, 08h45

Citation:

tu convertis l'ensemble des coordonnées en point de polygone, or il s'agit pour la plupart, de points de contrôles: les points ne sont pas forcement à proximité de la courbe.

Je ne comprends pas ce point ?
Tu veux dire que gimp ne genère pas les points sur la courbe ?
Il me semble pourtant que lorsque je demande à gimp de tracer le chemin, il colle parfaitement à la forme du polygone ?
Par contre il y a en effet un decalage au niveau de l'arrondi des pixels.

Pour ce qui est de passer direct par SVG, cela ma semble evident que cela est possible vu que gimp génère un fichier svg.

Pour l'union des zones, je en comprends pas non plus vu que pour moi un area est une seule et même zone contiguë...

vodiem · 20/09/2010, 10h37

Citation:

Envoyé par SpaceFrog

Je ne comprends pas ce point ?
Tu veux dire que gimp ne génère pas les points sur la courbe ?
Il me semble pourtant que lorsque je demande à gimp de tracer le chemin, il colle parfaitement à la forme du polygone ?
Par contre il y a en effet un décalage au niveau de l'arrondi des pixels.

gimp génère un chemin mais pas forcement polygonal.
l'utilisation du symbole "C" dans le SVG définit les points avec les points de contrôles de la courbe.
tu peux mieux le comprendre ici (le lien fonctionne occasionnellement ces derniers jours)
donc s'il te semble que c'est correct c'est que les points de contrôles sont proche de la courbe mais tu constateras qu'il y a un chevauchement de la partie jaune celui "de 11h" sur le violet. tu peux visualiser l'area dans inkscape en remplaçant dans le svg le "C" par un vide via un éditeur de texte simple.
cela traduit ton algo: conversion des points de définition de courbe en point polygonale.
tu comprends donc que si les points de contrôles sont éloignés ça fausse tout.

Citation:

Envoyé par SpaceFrog

Pour ce qui est de passer direct par SVG, cela ma semble evident que cela est possible vu que gimp génère un fichier svg.

je suis pas sur qu'on se comprenne je voulais dire que cette exemple: "changement de couleur de l'area au survol" peut être fait avec un fichier SVG. il ne me semble pas que Gimp puisse générer cela. A noter qu'il peut générer le HTML via Filtres/Web/Image cliquable Web mais la définition de l'area n'est pas automatique...

Citation:

Envoyé par SpaceFrog

Pour l'union des zones, je en comprends pas non plus vu que pour moi un area est une seule et même zone contiguë...

tu as raison, ce que je voulais dire c'est qu'une forme comme la jaune peut être unie ce qui permet de lui attribuer dans la propriété "id" (inkscape) le nom "Jaune" qui sera repris automatiquement dans la définition de chaque area dans le html ce qui est pratique pour l'identifier.

SpaceFrog · 20/09/2010, 10h44

Ha oki...
Pour ce qui est de l'utilsation directe du SVG... c'est encore mal implémenté, ça passe sous ffx, mais pas sur pour IE

vodiem · 20/09/2010, 12h10

oui, j'ai lu qu'IE ne le gére pas mais le SVG devrait être inclus dans l'HTML5 et il me semble avoir vu des solus pour IE. c'est toujours bon à savoir.

sinon l'emploi d'un xslt, php, js... pour incorporer automatiquement les areas définit par un SVG serait peut-être intéressant en attendant?
cela éviterait ces étapes intermédiaires... curieusement je n'ai pas vu ça à croire que ce n'est pas intéressant où qu'il y a mieux comme méthode pour gérer le survole de zones irrégulières...

SpaceFrog · 20/09/2010, 13h13

je ne vois pas d'autre methode pour le survol de zones irregulières que les polygones

7enpier · 21/09/2010, 17h33

Bonjour,

Un grand merci à SpaceFrog pour ce script.
Étant assez réfractaire au javascript (ce n'est pas un choix, c'est juste qu'il me manque un tuto pour l'aborder qui me convienne), je peux enfin poursuivre la construction de mon site comme je l'ai imaginé.

Cependant, j'ai besoin qu'au survol d'une zone, en plus du changement d'image, une info-bulle apparaisse. Comment faire ?

SpaceFrog · 21/09/2010, 18h52

soit tu utilises le alt ou mieux le title pour te servir de l'infobulle standrad du navigateur
soit tu lances une fonction infobulle perso

Code :

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

 onmouseover="swapPic(this,2);infobulle(this,'texteinfobulle')"

avec la fonction qui va bein pour faire apparaitre un div au bon endroit avec le bon texte ...
il existe des scripts d'infobulle tout faits (voire des addon jquery)
pour ne recommander que mon ami Daniel :
http://danielhagnoul.developpez.com/...ip/tooltip.php

7enpier · 21/09/2010, 19h32

Le code que tu m'as donné, ben il y a un délai entre le mouseover et l'apparition du texte. Or, je voudrais que ça apparaisse aussi vite que le changement d'image, et pouvoir le placer au-dessus du curseur.

Citation:

Envoyé par SpaceFrog

avec la fonction qui va bein pour faire apparaitre un div au bon endroit avec le bon texte ...
il existe des scripts d'infobulle tout faits (voire des addon jquery)
pour ne recommander que mon ami Daniel :
http://danielhagnoul.developpez.com/...ip/tooltip.php

Euh... j'ai pas compris ce passage.

Pour info, j'ai 286 zones. Je sais pas si c'est utile à dire, mais au cas ou...

SpaceFrog · 22/09/2010, 08h22

délai pour l'infobulle avec alt ou title ?
ça depend du navigateur...

pour ce qui est du script de l'infobulle as tu été voir le lien donné ???
Daniel propose un script d'infobulle tout fait, sinon tu devras toi même coder ton infobulle en faisant apparaitre / dipsaraitre un div que tu rempliras avec le texte voulu et tu le placeras à l'endroit voulu ...

7enpier · 22/09/2010, 16h53

Si, j'ai suivi le lien... Mais quand j'essaye le code, par un simple copier/coller, ça ne fonctionne pas...
Je sais pas pourquoi et ça m'agace profondément.

Sinon, j'avais trouvé un code pour faire apparaitre disparaitre une info-bulle dans un div. Sur leur exemple, ça marche très bien. Mais quand je l'ajoute à ma carte, le curseur redevient une flèche et "sautille". Et quand je quitte la zone, ben ça reste affiché...

24/08/2010, 14h38	#2
RomainVALERI Expert Confirmé Sénior Romain VALERI POOête Inscription : avril 2008 Messages : 2 653 Détails du profil Informations personnelles : Nom : Romain VALERI Âge : 36 Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : POOête Informations forums : Inscription : avril 2008 Messages : 2 653 Points : 4 401 Points : 4 401	Je n'utilise pas beaucoup les <map>, mais le principe que tu présentes est élégant et efficace ^^ merci SF __________________ ...pour les linguistes et les curieux >>> générateur de phrases aléatoires __________________
	00

03/09/2010, 20h25	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 32 812 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 32 812 Points : 51 388 Points : 51 388	si tu regardes les sources de la page demo, les images sont preloadées ... __________________ Ma page Developpez - Mon Blog Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr Humour
	00

20/09/2010, 10h44	#13
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 32 812 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 32 812 Points : 51 388 Points : 51 388	Ha oki... Pour ce qui est de l'utilsation directe du SVG... c'est encore mal implémenté, ça passe sous ffx, mais pas sur pour IE __________________ Ma page Developpez - Mon Blog Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr Humour
	00

20/09/2010, 13h13	#15
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 32 812 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 32 812 Points : 51 388 Points : 51 388	je ne vois pas d'autre methode pour le survol de zones irregulières que les polygones __________________ Ma page Developpez - Mon Blog Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr Humour
	00

21/09/2010, 18h52	#17
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 32 812 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 32 812 Points : 51 388 Points : 51 388	soit tu utilises le alt ou mieux le title pour te servir de l'infobulle standrad du navigateur soit tu lances une fonction infobulle perso Code : Sélectionner tout - Visualiser dans une fenêtre à part onmouseover="swapPic(this,2);infobulle(this,'texteinfobulle')" avec la fonction qui va bein pour faire apparaitre un div au bon endroit avec le bon texte ... il existe des scripts d'infobulle tout faits (voire des addon jquery) pour ne recommander que mon ami Daniel : http://danielhagnoul.developpez.com/...ip/tooltip.php __________________ Ma page Developpez - Mon Blog Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr Humour
	00

20/09/2010, 12h10	#14
vodiem Expert Confirmé Sénior Diem VO Vivre Inscription : avril 2006 Messages : 2 772 Détails du profil Informations personnelles : Nom : Diem VO Âge : 40 Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur) Informations professionnelles : Activité : Vivre Secteur : Conseil Informations forums : Inscription : avril 2006 Messages : 2 772 Points : 4 337 Points : 4 337	oui, j'ai lu qu'IE ne le gére pas mais le SVG devrait être inclus dans l'HTML5 et il me semble avoir vu des solus pour IE. c'est toujours bon à savoir. sinon l'emploi d'un xslt, php, js... pour incorporer automatiquement les areas définit par un SVG serait peut-être intéressant en attendant? cela éviterait ces étapes intermédiaires... curieusement je n'ai pas vu ça à croire que ce n'est pas intéressant où qu'il y a mieux comme méthode pour gérer le survole de zones irrégulières...
	00

21/09/2010, 17h33	#16
7enpier Invité de passage Inscription : septembre 2010 Messages : 3 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 3 Points : 3 Points : 3	Bonjour, Un grand merci à SpaceFrog pour ce script. Étant assez réfractaire au javascript (ce n'est pas un choix, c'est juste qu'il me manque un tuto pour l'aborder qui me convienne), je peux enfin poursuivre la construction de mon site comme je l'ai imaginé. Cependant, j'ai besoin qu'au survol d'une zone, en plus du changement d'image, une info-bulle apparaisse. Comment faire ?
	00

22/09/2010, 08h22	#19
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 32 812 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 32 812 Points : 51 388 Points : 51 388	délai pour l'infobulle avec alt ou title ? ça depend du navigateur... pour ce qui est du script de l'infobulle as tu été voir le lien donné ??? Daniel propose un script d'infobulle tout fait, sinon tu devras toi même coder ton infobulle en faisant apparaitre / dipsaraitre un div que tu rempliras avec le texte voulu et tu le placeras à l'endroit voulu ... __________________ Ma page Developpez - Mon Blog Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr Humour
	00

22/09/2010, 16h53	#20
7enpier Invité de passage Inscription : septembre 2010 Messages : 3 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 3 Points : 3 Points : 3	Si, j'ai suivi le lien... Mais quand j'essaye le code, par un simple copier/coller, ça ne fonctionne pas... Je sais pas pourquoi et ça m'agace profondément. Sinon, j'avais trouvé un code pour faire apparaitre disparaitre une info-bulle dans un div. Sur leur exemple, ça marche très bien. Mais quand je l'ajoute à ma carte, le curseur redevient une flèche et "sautille". Et quand je quitte la zone, ben ça reste affiché...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email