Une carte avec département cliquables

Bonjour,

Je suis un débutant dans le web, en meme temps nouveau sur le forum, c'est mon premier POST.
Dans un projet personnel j'aimerais réaliser une carte (du maroc) avec les départements cliquables (des liens) et qui changent de couleur au survol, comme sur ce site. www.vivastreet.fr

Je ne sais pas comment commencer, si c’était des formes carré ou réctangulaire ca aurait été facile mais la c'est un peu compliquer.

J'ai vu un peu le code source de vivastreet, il travaillent avec la balise <aria> qui m'est inconnue.

Voila j'espere qu'on va m'aider, et merci d'avance pour les gens qui essaierons

Bonjour et bienvenue,

il s'agit d'une "image réactive", avec des zones cliquables qui utilise respectivement les éléments map et area (avec un E. ARIA avec un I c'est autre chose : accessibilité des applications web).
Il existe des outils qui t'évitent la tâche fastidieuse de taper les coordonnées de chaque zone à cliquer . Par contre j'ai pas de nom de programme à te proposer, n'ayant jamais eu à en réaliser jusqu'à présent.

Quelques conseils :
- n'oublie pas le contenu de l'attribut alt dans chaque élément area, ça permet aux non-voyants et à tous ceux qui ne vont pas afficher les images (et à Google pour le référencement !) de comprendre à quel département correspond chaque area.
- le Javascript que tu trouves sur Vivastreet (attributs onmousemachintruc de area) ne sert à rien. L'attribut href (comme pour les liens a) est suffisant.
- les attributs title qui ont exactement le même contenu que les attributs alt sont en théorie inutiles parce qu'ils n'apportent rien qui ne soit pas déjà dans le alt. Mais en pratique c'est bien utile d'avoir une infobulle qui confirme qu'on survole bien la bonne zone avant de cliquer
- wikipedia (Wikimedia Commons en fait) est une ressource possible pour la carte : https://secure.wikimedia.org/wikipedia/commons/wiki/File:Grande_Casablanca.svg?uselang=fr à condition de respecter la licence indiquée (elle est pas difficile à respecter, raison de plus )
- pour "dessiner" les bordures entre chaque département, tu n'es pas obligé d'utiliser 50 points très précis à moins que la zone soit toute petite (Grand Casablanca pour le Maroc, Belfort-90 pour la France par exemple)
- justement pour ces zones toutes petites et pour ceux qui n'afficheraient pas l'image ou auraient des problèmes à cliquer sur une zone minuscule (téléphone portable, léger tremblement, souris trop réactive, etc), doubler la carte par une liste de liens est une très bonne idée; comme sur http://dolceta.eu . Ces liens-là placés à proximité sont une aide bien utile.

Je vais me renseigner un peu sur la balise <area> dans le w3schools, parce que je connais pas, et je vais commencer ma carte.

Merci beaucoup Felipe pour les explications très claires et les conseils.

Bonjour,

juste une petite remarque sur le javascript.

Si je ne me trompe pas il sert à colorer les départements en changeant un background (ce qui implique de faire un fond supplémentaire pour chaque département).

En utilisant juste <area> les contours seront irréguliers.
En pratique, c'est déjà pas mal mais ne t'attends pas à un rendu identique.


H.

Euh si, tu peux très bien avoir un rendu identique vu que l'exemple utilise aussi <area>.

les balises <area> servent à définir les zones de détection de la souris mais pour avoir un remplissage parfait des départements comme c'est le cas ici, il y a une modification du background en javascript.

Les zones définies par <area> sont polygonales et donc pas ne peuvent décrire aussi finement les frontières.

H.

J'ai pas dis le contraire. Je crois que tu mélanges un peu tout.

Bonsoir,

je veux bien plus d'explications parce que je pensais avoir à peu près compris...

H.

Bonjour,

Peut être que ce que j'ai fait peut vous intéresser :

http://www.partir-en-vtt.com/balades_vtt/index.php

Il s'agit d'une carte de france qui remonte des balades à VTT. Le département se colorie et devient cliquable que si il y a une balade.

Si cela vous intéresse, veuillez vous reporter ici :

http://www.phpcs.com/codes/CARTOGRAPHIE-DYNAMIQUE-FRANCE-AVEC-BASE-MYSQL-BALISES-MAP_51962.aspx

Bonne continuation
Modifié par partir-en-vtt (22 Jun 2011 - 15:42)

Felipe a écrit :
il s'agit d'une "image réactive", avec des zones cliquables qui utilise respectivement les éléments map et area (avec un E. ARIA avec un I c'est autre chose : accessibilité des applications web).
Il existe des outils qui t'évitent la tâche fastidieuse de taper les coordonnées de chaque zone à cliquer . Par contre j'ai pas de nom de programme à te proposer, n'ayant jamais eu à en réaliser jusqu'à présent.

Bonsoir,

Des logiciels comme The Gimp ou Photophop remplissent cet office.

Bien à vous
Modifié par Olivier C (21 Jun 2011 - 21:04)

Bonjour,

HAML a écrit :
Les zones définies par <area> sont polygonales et donc pas ne peuvent décrire aussi finement les frontières.

Si, tout dépend du nombre de côtés que tu donnes au polygone. Jette un coup d'oeil sur le code de vivastreet!
Une fois le polygone bien tracé, l'événement js "onmouseover" envoie le nom du département en paramètre et la fonction appelée se charge de modifier le backgroundColor du département. Et puis, l'inverse sur un "onmouseout".

@wezn :
Si tu ne tiens pas à installer de logiciel particulier, comme The Gimp, sache que le site http://www.mobilefish.com/services/image_map/image_map.php permet de créer des images cliquables gratuitement sous certaines conditions de poids et de dimensions d'image.

Cordialement

Olivier C a écrit :

Bonsoir,

Des logiciels comme The Gimp ou Photophop remplissent cet office.

Bien à vous

Le problème c'est que cette fonction de Photoshop avait été enlevé (on ne pouvait plus faire que des carrés, et non tracer des polygone), sur la CS5 je n'ai pas regardé.

The GIMP le fait très bien car j'ai produit ma carte avec ce logiciel.

Je confirme les dires de partir-en-vtt. "The Gimp" convient très bien pour la création d'images cliquables.
Je l'ai testé il y a quelque temps déjà.

meche a écrit :
Le problème c'est que cette fonction de Photoshop avait été enlevé (on ne pouvait plus faire que des carrés, et non tracer des polygone), sur la CS5 je n'ai pas regardé.

Je ne savais pas que Photoshop était (ou a été) bridé sur ce plan, je n'utilise que The Gimp, ce logiciel gratuit est vraiment une merveille (sauf pour l'ergonomie).