Map cliquable

Bonjour!
On vient tout juste de m'assigner un projet pour mon site web, seulement je ne sais pas trop comment m'y prendre.
Le site

Alors voilà, dans la partie "Point de vente", nous aimerions remplacé les menu défilants par des map à la place.
Donc, dans le cas du Canada, à la place d'avoir une liste avec le noms des différentes provinces, nous aurions une map illustrant le Canada avec les provinces indiqué. L'utilisateur n'aurais qu'à cliquer à l'endroit désiré et ça amènerais sur la page dédier des détaillants.
Il n'y que pour la province du Québec que ça risque d'être plus compliqué.

Alors comme je disait plus haut j'ignore comment m'y prendre.
- Faire des zones cliquables sur une image
- Les pages doivent resté fonctionnel en cas de non chargement de la map

Je suis donc à la recherche de pistes, tuto, plugin ou autres.

Bonjour,

Il existe des outils pour définir les zones (dans Dreamweaver, il suffit de "dessiner" la zone, par exemple).

L'utilisation de map est effectivement la plus simple. Mais attention à bien déclarer les textes alternatifs pour les zones cliquables.

Laurie-Anne: En fait je connaissais cet outils de Dreamweaver, l'ayant utilisé durant mes études... il y a longtemps, mais je ne me souvenait plus comment il s'appelait!
T'inquiète, j'ai trouvé des explication très clair sur internet à ce sujet.

Victor Brito: C'est justement le problème de compatibilité qui m'a fais hésiter pour SVG. Par contre je crois avoir trouvé un tuto qui montre comment créer les map pour iE6 à 8 à l'aide de js à partir d'un fichier svg. Mais je sais pas ce que ça vaut. Pour l'instant j'explore.

J'ai commencé à tester avec la méthode indiqué. Jusqu'à maintenant ça fonctionne bien.

Mais comme je disais... c'est long! J'ai tous les USA et le Canada à faire, en plus du Québec divisé en régions...
Le plus dure est de trouvé une map du Québec déjà divisé...
Peut-être devrais-je ajouté un map de l'Europe également.

Bon je cesse de me plaindre... au boulot! Une chance que c'est pas urgent!

Merci pour vos réponses!

Va voir sur wikipedia, attention au licences.

Oui, j'en ais trouvé une pour les USA et une pour le Canada. Il n'y a que celle pour le Québec que je n'ais pas encore trouvé.
Et pour les licences, je regarde bien. De toute façon, ce que je mets sur les site n'a plus rien à voir avec l'original.

Je pense que tu devrais tout de même conserver une liste déroulante en plus de la carte.

L'utilisation d'une image à zones peut être très gênante pour les personnes ne naviguant pas à la souris. En effet, même si les zones sont biens étiquetés et qu'elles sont suffisament mises en évidence lorsqu'elles ont le focus, tu obliges quand même l'utilisateur à passer en revue tous les liens précédent sa région, alors qu'il n'a le plus souvent qu'à en saisir les premières lettres pour la sélectionner immédiatement lorsqu'elles sont dans une liste standard. Pour 5 ou 10 zones ce n'est pas trop grave, mais s'il y en a 50 ou 100 ça peut vraiment être embêtant.

fvsch a écrit :
Pour un besoin relativement simple comme ici, du SVG + Raphaël pour Internet Explorer 6-8 ça peut le faire.

Ah tien c'est justement de ce script dont parle le tuto que j'ai trouvé!

QuentinC: Merci de ton commentaire! Effectivement ça serait plus commode de laisser la liste déroulante. Tant qu'à laisser les choix à l'utilisateur!

a écrit :
QuentinC: Merci de ton commentaire! Effectivement ça serait plus commode de laisser la liste déroulante. Tant qu'à laisser les choix à l'utilisateur!

Oui. Le mieux c'est de voir ça un peu comme une sélection de date: laisser l'utilisateur en saisir une manuellement s'il le souhaite, ou ouvrir le calendrier en cliquant sur un bouton à côté de la liste. Là c'est pareil, si tu laisses la liste, l'utilisateur peut sélectionner ce qu'il souhaite de la façon qui est la plus simple pour lui entre la liste ou la carte.