utiliser jQuery pour des area sur des images

**thor76160** · 06/09/2010, 17h44

bonsoir,

voilà j'aimerais utiliser cette image :

et dessiner les contours avec jQuery. lors d'un survole, j'aimerais que le département change de couleur.
j'ai imaginé une solution. j'utilise cette image à la base, puis une utre qui sera entièrement rouge (ou verte ...).
je définis les zones, et lors d'un survole, l'image de l'autre couleur vient se superposer (mais uniquement pour la région survolée). j'aimerais aussi un évènement onclick et utiliser une base de données sqlserver derrière tout ça.

je n'arrive pas à trouver d'exemple qui s'approche de mon besoin sur google ! c'est aussi la première fois que j'utilise jQuery pour tout ce qui est manipulation d'image ...
un petit coup de main svp ?

**thor76160** · 06/09/2010, 18h23

voici un exemple qui se rapproche beaucoup de ce que je veux, je vais essayer de développer mon projet.

[Edit] en voila un premier aperçu :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>jQuery maphilight documentation</title>
	<script type="text/javascript" src="js/jquery-ui-1.8.4.custom/js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.4.custom/plugins/jquery.maphilight.min.js"></script>
	<script>$(function() {
		$('.map').maphilight();
	});</script>
</head>
<body>
 
<img class="map" src="demo_france.png" width="1000" height="961" usemap="#usa">
<map name="usa">
<area href="#" title="SC" shape="poly" coords="100,100, 100,200, 200,200, 200,100"></area>
</map>
<a href="./">Back to the index</a>
</body>
</html>

comment puis-je définir les coordonnées de mes points pour le tracet ? si je veux faire quelque chose de précis, je vais devoir en définir des centaines, même des milliers O_o
y a t'il un moyen simple et rapide ?

**SpaceFrog** · 06/09/2010, 19h55

Pour la methode des hover sur les areas
http://www.developpez.net/forums/d96...-larea-survol/

pour les coordonnées des areas avec gimp et un peu d'astuce :
http://www.developpez.net/forums/d49...es-clic-image/

**thor76160** · 06/09/2010, 20h40

j'ai installé gimp, et lorsque je lance l'appli ça plante >_<
il n'y a même pas de message d'erreur ... par contre j'ai fireworks cs5 et photoshop cs5 ... ya moyen de faire la même chose avec eux ?

**SpaceFrog** · 07/09/2010, 08h34

je ne sais pas si toshop permet l'exportation d'une zone ...

si gimp plante desinstalle trouve une version stable et réinstalle...

**danielhagnoul** · 07/09/2010, 22h47

Bonsoir

Je n'ai jamais créé de cartes, alors pour le plaisir j'ai installé GIMP 2.6.10, (je ne connaissais pas, car j'ai toujours utilisé Fireworks et ACDSee), sur XP SP3 sans aucun problème.

GIMP me semble une véritable usine à gaz au premier abord, avec des fenêtres baladeuses en grand nombre, c'est très déconcertant. Mais il me semble, je n'ai pas encore eu le temps de tester grand-chose, très puissant et très intéressant. Je crois que Fireworks pourrait bien finir à la poubelle.

Il suffit de sélectionner un département avec la baguette magique, puis le menu "Sélection" et l'option "Vers chemin" qui crée un fichier dans la boîte de dialogue "Chemins" .

Ce dialogue n'est pas visible par défaut, il faut aller dans le menu "Fenêtres", option "Fenêtres ancrables" et option "Chemins"

On peut choisir l'option d'exporter le chemin créé en tant que fichier SVG par un clic droit sur un chemin.

Je suis heureux qu'il exporte au format SVG, car j'en ai l'usage pour de futures pages HTML5 avec SVG natif, cela fonctionne très bien avec Firefox 4.

Mais comment passer du code SVG aux polygones pour le plug-in ?

Exemple, le fichier SVG pour la Belgique :

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
<?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.94444in" height="6.65278in"
     viewBox="0 0 500 479">
  <path id="Sélection#21"
        fill="none" stroke="black" stroke-width="1"
        d="M 334.00,7.00
           C 335.01,11.02 335.35,11.93 339.00,14.00
             339.00,14.00 339.00,17.00 339.00,17.00
             339.00,17.00 349.00,15.00 349.00,15.00
             351.50,19.68 353.31,19.39 358.00,21.00
             356.38,25.09 355.76,29.56 352.00,32.00
             352.00,32.00 353.00,39.00 353.00,39.00
             362.30,39.00 365.09,38.00 371.00,46.00
             371.00,46.00 374.55,54.63 374.55,54.63
             374.55,54.63 369.00,64.22 369.00,64.22
             367.39,63.94 365.37,63.69 363.90,64.22
             361.03,65.90 355.35,75.80 355.52,79.00
             355.77,83.79 359.62,83.48 359.00,92.00
             359.00,92.00 348.00,94.00 348.00,94.00
             343.80,87.32 335.22,82.89 327.97,80.00
             327.97,80.00 327.97,66.50 327.97,66.50
             326.77,63.75 322.72,66.20 321.00,72.00
             313.34,73.99 312.94,74.62 305.00,72.00
             305.00,72.00 308.00,70.00 308.00,70.00
             306.03,64.70 306.06,64.53 307.00,59.00
             299.68,57.13 298.40,55.32 290.00,57.00
             289.35,53.01 288.21,50.45 284.00,49.13
             282.25,48.59 280.01,48.96 278.56,47.94
             277.57,47.25 273.75,37.79 273.00,36.00
             273.00,36.00 263.17,38.78 263.17,38.78
             263.17,38.78 256.00,35.00 256.00,35.00
             256.00,35.00 254.00,23.00 254.00,23.00
             254.00,23.00 279.00,11.00 279.00,11.00
             279.84,18.41 284.52,15.08 288.05,15.45
             291.10,15.77 292.81,17.88 295.09,18.32
             300.02,19.28 305.31,14.54 308.00,11.00
             308.00,11.00 315.00,11.00 315.00,11.00
             315.00,11.00 313.00,9.00 313.00,9.00
             313.00,9.00 313.00,8.00 313.00,8.00
             322.04,7.35 324.85,12.04 334.00,7.00 Z" />
</svg>

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

Il est vrai qu'au debut Gimp est un peu déroutant pour des non initiés, mais il est de la même veine que photoshop...

pour le passage du fichier exporté au coordonnées d'un area, soit un copier coller et de l'huile de clavier...
ou une petite moulinette:

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
<?php
$chaine='d="M 334.00,7.00
           C 335.01,11.02 335.35,11.93 339.00,14.00
             339.00,14.00 339.00,17.00 339.00,17.00
             339.00,17.00 349.00,15.00 349.00,15.00
             351.50,19.68 353.31,19.39 358.00,21.00
             356.38,25.09 355.76,29.56 352.00,32.00
             352.00,32.00 353.00,39.00 353.00,39.00
             362.30,39.00 365.09,38.00 371.00,46.00
             371.00,46.00 374.55,54.63 374.55,54.63
             374.55,54.63 369.00,64.22 369.00,64.22
             367.39,63.94 365.37,63.69 363.90,64.22
             361.03,65.90 355.35,75.80 355.52,79.00
             355.77,83.79 359.62,83.48 359.00,92.00
             359.00,92.00 348.00,94.00 348.00,94.00
             343.80,87.32 335.22,82.89 327.97,80.00
             327.97,80.00 327.97,66.50 327.97,66.50
             326.77,63.75 322.72,66.20 321.00,72.00
             313.34,73.99 312.94,74.62 305.00,72.00
             305.00,72.00 308.00,70.00 308.00,70.00
             306.03,64.70 306.06,64.53 307.00,59.00
             299.68,57.13 298.40,55.32 290.00,57.00
             289.35,53.01 288.21,50.45 284.00,49.13
             282.25,48.59 280.01,48.96 278.56,47.94
             277.57,47.25 273.75,37.79 273.00,36.00
             273.00,36.00 263.17,38.78 263.17,38.78
             263.17,38.78 256.00,35.00 256.00,35.00
             256.00,35.00 254.00,23.00 254.00,23.00
             254.00,23.00 279.00,11.00 279.00,11.00
             279.84,18.41 284.52,15.08 288.05,15.45
             291.10,15.77 292.81,17.88 295.09,18.32
             300.02,19.28 305.31,14.54 308.00,11.00
             308.00,11.00 315.00,11.00 315.00,11.00
             315.00,11.00 313.00,9.00 313.00,9.00
             313.00,9.00 313.00,8.00 313.00,8.00
             322.04,7.35 324.85,12.04 334.00,7.00 Z" />
</svg>';
 
preg_match('~M[^\n]*\n\s+C\s+([^Z]+)~',$chaine,$brutcoords);
$coords=preg_replace('~(\s+\n*)~',',',$brutcoords[1]);
$coords=preg_replace('~(\.\d{2})|,$~','',$coords);
echo 'coords="'.$coords.'"';
?>

Je m'étais dit qu'un jour je ferais un pluggin pour gimp afin d'exporter directement les coordonnés d'une zone capturée à la baguette magique ou aux ciseaux magiques... mais j'ai jamais vraiment eu le temps de me pencher sur python ...