Méthode pour réaliser une carte cliquable

Bonjour, j'ai trouvé cette carte cliquable (voir en bas de page)
http://www.regionsjobs.be/actualite/comment-trouver-le-logo-de-ma-soci%C3%A9t%C3%A9/2012-03-12/?utm_source=sudpresse&utm_medium=int%C3%A9gration&utm_campaign=bloc%2B3%2Bnews%2Bhomepage



Comment faire pour réaliser ce genre de carte sans flash? Je vois tout un tas de coordonnées quand je check le code, comment générer ces coordonnées?
(coords="231,243,238......)

merci pour vos infos

Bonjour,

On utilise généralement l'élément MAP pour produire ce genre de choses. C'est assez compliqué à mettre en place (calcul des coordonnées), mais certains logiciels comme Dreamweaver le permettent plus facilement (c'est même parfois le seul intérêt de ces outils WYSIWYG).
> Utilisation de <map> sur W3School ;
> Utilisation d'<area>, qui va avec.

Bonjour.

Avec illustrator:

creer son image, ouvrir le panneau attributs, définir des liens sur les tracés, enregistrer pour le web (html+images) et tu auras déjà la base, qu'il ne reste plus qu'à customiser pour l'interactivité.

Ce doit être possible avec Inkscape, mais je ne connais pas...

Hello,

Ou encore avec cet outil en ligne : http://www.maschek.hu/imagemap/imgmap

Il n'est pas forcément très pratique mais il peut dépanner si on n'a pas Illustrator ou Dreamweaver.

Salut,

La meilleur solution, pour moi, serait de créer ta carte sous illu/inkscape de l'importer en SVG et de réaliser l’interaction nécessaire en SVG.

Les avantages :

- Le langage SVG s'appuie sur XML donc niveau syntaxique tu ne seras pas perdu;
- L'image pourra être agrandie à l'infini sans perte de qualité;
- pour une animation plus poussé tu peux passer par javascript;
- SVG crée un DOM et par conséquent est plus accessible (balise title, desc, etc);
- beaucoup de tuto, dont un bientôt sur Alsa si tout vas bien ;

Si tu veux faire comme l'exemple que tu montres c'est exactement le domaine d'expertise d'SVG, regarde Googlemap utilise cette technologie, c'est plutôt convainquant.

PS: sinon tu peux le faire simplement en HTML avec remplacement d'image par CSS et un title eu peu stylisé, mais bon, beaucoup de balises vides pas terribles, SVG est un bon challenge
Modifié par Gili (13 Mar 2012 - 17:29)

oui bon mais le SVG c'est très bien si tu vises ie à partir de la version 9. Si ta carte est simple comme dans l'exemple, une map sera plus compatible et assez simple à mettre en œuvre.

a écrit :
regarde Googlemap utilise cette technologie, c'est plutôt convainquant.

Ils ont juste une ou deux api pour mettre des overlays sur les cartes. Mais google maps c'est du bon vieux png.
Modifié par kustolovic (13 Mar 2012 - 18:35)

kustolovic a écrit :
oui bon mais le SVG c'est très bien si tu vises ie à partir de la version 9. Si ta carte est simple comme dans l'exemple, une map sera plus compatible et assez simple à mettre en œuvre.

Avec Raphaël tu peux très simplement faire du SVG qui fonctionne sous IE 6, 7 et 8. Et c'est quand même bien plus simple et beaucoup plus pratique de travailler avec du SVG qu'avec une image map pour faire ce genre de chose.

Un tuto pour créer une carte de France cliquable en SVG compatible "old" IE.

En plus y'a même pas besoin de dessiner la carte : http://commons.wikimedia.org/wiki/File:D%C3%A9partements_de_France-simple.svg
Modifié par jb_gfx (13 Mar 2012 - 19:04)

kustolovic a écrit :
Ils ont juste une ou deux api pour mettre des overlays sur les cartes. Mais google maps c'est du bon vieux png.

Effectivement petit lapsus, je pensais à Google Analytics, merci de le signaler.

bonjour foxprox,

le plus simple est d'utiliser le logiciel gratuit de traitement d'image The Gimp : http://www.01net.com/telecharger/windows/Multimedia/creation_graphique/fiches/5245.html

Marche à suivre pour définir des zones actives sur une image :
• ouvrir GIMP —> ouvrir une image —> Filtres —> Web —> image Web cliquable —> rectangle ou cercle ou polygone —> tracer, double-cliquer —> valider —> Affichage —> source —> sélectionner —> copier —> coller le code .html dans votre éditeur —> corriger le code proposé par Gimp :
<img src="mon-image.png" alt="" style="width:_px;height:_px;border:0" usemap="#map"> est correct ;
<map id="map" name="map"> est cross-browser.

• les <area ... /> peuvent recevoir les events handlers JavaScript pour y appeler toute fonction :
<area ... alt="" onmouseover="maFonction1('_');" onmouseout="maFonction2('_');" onmousedown="maFonction3('_');" href="#" onclick="return(false);" />

Voilà-voilà ...

J'avais jadis fait ceci, vraiment pour m'amuser : -http://sentrais.fr/retable-v2/retable-v2.htm
Modifié par Laurie-Anne (15 Mar 2012 - 08:13)

GIMP +1 également pour faire les maps

Sur le site donnée au départ, le code HTML est une simple MAP (image avec zone cliquable AREA).

Pour l'affichage des infos bulle, on dirait du jQuery avec le plugin ToolTip et l'effet de survol map avec le plugin Map Hilight.

Mais en fait en y regardant de plus près, il utilise le script mapper.js

foxprox,
je reviens vers toi pour te proposer une solution fort simple que je viens de mettre en oeuvre, abordable pour les amateurs éclairés : pas de flash, quelques petites fonctions javascript simplissimes, tooltip au survol, texte au clic ...

-http://sentrais.fr/florence_map/florence-map.htm
Modifié par Laurie-Anne (06 Apr 2012 - 20:19)

Erreur !
Modifié par zebulin (13 Apr 2012 - 13:17)

Et pour finir, ceci : -http://sentrais.fr/florence_map/florence-map.htm


C'est pas l'usine à gaz comme SVG, c'est juste du <map> <area /> bien né doublé d'un javascript simplissime, pour instruire le visiteur, pas seulement pour faire joli.
Modifié par Laurie-Anne (13 Apr 2012 - 15:07)