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>

utiliser jQuery pour des area sur des images

jQuery

Vue hybride

Discussions similaires

Partager

Partager