utiliser jQuery pour des area sur des images

Version imprimable

06/09/2010, 17h44
thor76160

utiliser jQuery pour des area sur des images

bonsoir,

voilà j'aimerais utiliser cette image :

http://upload.wikimedia.org/wikipedi...on_map.svg.png

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

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:

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 ?

06/09/2010, 19h55
SpaceFrog

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/
06/09/2010, 20h40
thor76160

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 ?
07/09/2010, 08h34
SpaceFrog

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

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

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:

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>

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:

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

08/09/2010, 09h45
danielhagnoul

Bonjour

:ccool: Merci pour le coup de ... Chut ! Pas de langage serveur sur un sous-forum JavaScript. ;)
08/09/2010, 09h54
SpaceFrog

outil en js ...
http://www.developpez.net/forums/d96...l/#post5457078
08/09/2010, 13h29
thor76160

ok merci pour vos infos !!
j'ai commencé à utiliser vos astuce, je vous tiendrais au courant :)
08/09/2010, 13h48
SpaceFrog

Thor,
Si tu mappes les jardins de Repainville, fais gaffe de pas passer sur mon jardin ;)
09/09/2010, 12h01
SpaceFrog

Encore un peu plus loin..
http://www.developpez.net/forums/d96...-larea-survol/