points de tracé pour l'image cliquable

Question

Je souhaite ajouter la mise en surbrillance automatique aux images de ma page Web. J'ai trouvé la bibliothèque mapper.js très utile pour y arriver, mais créer des diagrammes x, y autour d'une carte régionale prend beaucoup de temps.

Existe-t-il un moyen rapide de créer des coordonnées de délimitation d'un polygone irrégulier comme celles que l'on peut trouver sur les cartes régionales?

EDIT
Il doit y avoir un moyen de le faire. J'ai Fireworks 8 ainsi que Photoshop CS3 sur mon PC Windows, mais je suis plus familier avec Fireworks. Si je crée un rectangle de sélection, je peux faire un clic droit> Modifier le rectangle de sélection> Convertir en chemin. Cela crée un chemin avec plusieurs points, mais je ne sais pas comment passer à l'étape suivante qui consiste à extraire les coordonnées de ces points.

J'ai essayé d'insérer un hotspot, une section de polygone, puis d'exporter vers "html et images". Les deux me donnent des hotspots carrés, pas un polygone. J'ai également essayé de faire un clic droit sur le chemin et d'éditer> Copier les contours du chemin, ainsi que Modifier> Copier le code HTML. Ne me donnez pas les coordonnées du polygone.

Je peux seulement obtenir des coordonnées de polygone pour une tranche. Y a-t-il peut-être un moyen de convertir le chemin à une tranche dans Fireworks 8?

Answer 1

Pour Fireworks 8:

1) Créez votre tente en utilisant la baguette magique & outil de sélection.

2) Faites un clic droit> Modifier Marquee> Convertir en chemin

3) Clic droit sur le chemin et sélectionnez "Insérer Hotspot" (ou appuyez sur Ctrl + U)

4) Sélectionnez Fichier> Exporter

5) Sélectionnez « HTML et images » pour « type »

Answer 2

Gimp offre a plugin/filter called Gimp image map qui a une interface agréable pour aider à créer une carte d'image. Je pense que cela fournira la fonctionnalité que vous recherchez. Sélectionnez Filters -> Web -> Image Map... pour afficher la boîte de dialogue

Une fois que vous avez la boîte de dialogue de la carte d'image ouverte, vous pouvez créer des zones de polygones pour le plus grand plaisir de votre coeur:

Vous êtes en mesure de créer et de personnaliser les zones que vous aimez modifier la lien, alt texte, cadres, le polygone lui-même ou même mettre en place des événements javascript.

Une fois que vous avez terminé, enregistrez-le et vous serez en mesure d'utiliser le fragment que vous venez d'enregistrer dans votre html

<img src="us_map.gif" width="771" height="448" border="0" usemap="#map" /> 

<map name="map"> 
<!-- #$-:Image map file created by GIMP Image Map plug-in --> 
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk --> 
<!-- #$-:Please do not edit lines starting with "#$" --> 
<!-- #$VERSION:2.3 --> 
<!-- #$AUTHOR:Colin Harrington --> 
<area shape="poly" coords="149,292,254,332,308,41,262,33,232,27,169,14,120,9,102,52,92,190" alt="West Coast" href="wc.html" /> 
<area shape="poly" coords="474,267,522,368,574,62,465,17,422,19,326,51,284,161,293,224,322,250,363,219,419,222" alt="Midwest" href="mw.html" /> 
<area shape="poly" coords="634,58,583,74,527,360,670,419,757,180,770,65,770,24,705,10,735,29" alt="East Coast" href="ec.html" /> 
<area shape="poly" coords="380,251,379,285,458,300,464,363,413,426,330,373,287,317,335,323,340,250" alt="Texas" href="tx.html" /> 
</map> 

Answer 3

Si vous préférez rester dans le camp d'Adobe, ImageReady a la capacité de créer des cartes d'image beaucoup comme Gimp. Ils ont a tutorial on using it to create image maps online, mais le css sur la page est actuellement cassé et vous ne serez pas en mesure de voir la page, sauf si vous l'imprimez. Ensuite, il ressemblera à this pdf.

Answer 4

est ici un simple application web facile à utiliser pour créer des cartes d'image. Cela vous évitera d'avoir à faire face à d'autres programmes (DreamWeaver, PhotoShop, Gimp, etc.).

http://www.image-mapper.com/

Answer 5

Il semble que les autres réponses étaient pour savoir comment le faire manuellement (ne pas répondre à la question du tout) .. depuis ce poste apparaît dans les résultats de Google pour ce sujet, je suis mise à jour avec quelques informations I ont constaté que donne au moins un point de départ sur la façon de le faire de manière automatisée:

promettant un PHP que je suis à la recherche dans: http://www.imagemagick.org/discourse-server/viewtopic.php?f=1&t=14646

Autres ressources: je trouve

http://marakana.com/blog/examples/php-image-filters.html

http://vis.lbl.gov/NERSC/Software/gsharp/help/GsharpWE/userguide/imagemaps.html

http://en.wikipedia.org/wiki/Canny_edge_detector

Fondamentalement, la recherche de mots-clés comme « détecteur de bord d'image » et les choses de cette nature semblent conduire à des résultats plus pertinents, je suis à la recherche encore un que je peux utiliser mais je suis juste un peu surpris que tant de gens semblent penser que c'est quelque chose qui devrait être fait manuellement quand il serait beaucoup plus efficace de le faire par programmation.

Answer 6

Ceci est pour la personne frustrée qui cherche à générer automatiquement des coordonnées à partir d'une image d'une carte.

Ouvrez votre carte dans photoshop. Utilisez la baguette magique pour sélectionner le bord de l'image Convertir le texte défilant sur un chemin Exporter ce chemin vers l'illustrateur Ouvrez le fichier dans Illustrator « Enregistrer sous ... » Fichier SVG (note: PAS svgcompressed) Dans le menu des options select 'link' Hit sauvé

Ouvrez votre fichier .svg dans un éditeur de texte et vous aurez vos coordonnées.