puntos de trazado para el mapa de imagen

Question

Quiero agregar el área de resaltado automática a los mapas de imágenes en mi página web. He encontrado que la biblioteca mapper.js es muy útil para lograr esto, sin embargo, crear las trazas x, y alrededor de un mapa regional consume mucho tiempo.

¿Existe alguna manera rápida de crear coordenadas de delimitación de un polígono irregular tal como se puede encontrar en los mapas regionales?

EDITAR
Tiene que haber una manera de hacer esto. Tengo Fireworks 8 y Photoshop CS3 en mi PC con Windows, pero estoy más familiarizado con Fireworks.

Si creo una marquesina, puedo hacer clic con el botón derecho en> Modificar marquesina> Convertir en ruta. Eso crea un Camino con varios puntos, pero no sé cómo llegar al siguiente paso que está extrayendo las coordenadas de esos puntos.

He intentado insertar un punto de acceso, un segmento de polígono, y luego exportarlo a "html e imágenes". Ambos me dan puntos de acceso cuadrados, no un polígono. También intenté con el botón derecho del mouse en la ruta y en Editar> Copiar contornos de ruta, y también en Editar> Copiar código HTML. Tampoco me den las coordenadas poligonales.

Solo puedo obtener coordenadas de polígono para una porción. ¿Existe alguna forma de convertir la ruta en una porción en Fireworks 8?

Answer 1

Para Fireworks 8:

1) Crea tu carpa usando La varita mágica & herramienta de marco.

2) Haz clic derecho> Modificar Marquesina> Convertir a Ruta

3) Haga clic en la ruta de acceso y seleccione "Insertar hotspot" (o pulse Ctrl + U)

4) Seleccione Archivo> Exportar

5) Seleccione "HTML e imágenes" para "Guardar como tipo"

Answer 2

Gimp ofrece a plugin/filter called Gimp image map que tiene una interfaz agradable para ayudar a crear un mapa de imagen. Creo que proporcionará la funcionalidad que está buscando. Seleccionar Filters -> Web -> Image Map... para que aparezca el cuadro de diálogo

Una vez que tenga el cuadro de diálogo de mapa de imagen abierto puede crear áreas de polígonos para deleite de su corazón:

Usted es capaz de crear y personalizar áreas como desee modificar el enlace, texto alternativo, marcos, el propio polígono o incluso configuración de eventos de JavaScript.

Después de que haya terminado, guardarlo y usted será capaz de utilizar el fragmento que acaba de guardar en su 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 prefiere quedarse en el campamento de Adobe, ImageReady tiene la capacidad de crear mapas de imágenes muy similares a Gimp. Tienen a tutorial on using it to create image maps online, pero el CSS en la página está actualmente roto y no podrá ver la página a menos que la imprima. Entonces se verá como this pdf.

Answer 4

Aquí hay una, aplicación sencilla y fácil de uso en la web para la creación de mapas de imágenes. Le ahorrará tener que lidiar con programas adicionales (DreamWeaver, PhotoShop, Gimp, etc.).

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

Answer 5

Parece que las otras respuestas fueron de cómo hacerlo manualmente (no responder a la pregunta en absoluto) .. ya que este post se muestra en los resultados de Google para este tema, estoy actualizando con algo de información I han encontrado que al menos se da un punto de partida sobre cómo hacer esto de una manera automatizada:

prometiendo un PHP que estoy investigando: http://www.imagemagick.org/discourse-server/viewtopic.php?f=1&t=14646

Otros recursos que he encontrado:

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

Básicamente, en busca de palabras clave como "detector de bordes de imagen" y cosas de esta naturaleza parecen conducir a resultados más relevantes, todavía estoy buscando uno que pueda utilizar pero estoy un poco sorprendido de que mucha gente parezca pensar que esto es algo que debería hacerse manualmente cuando sería mucho más efectivo hacerlo programáticamente.

Answer 6

Esto es para la persona frustrada que busca auto generar coords a partir de una imagen de un mapa.

Abra su mapa en photoshop. Usa la varita mágica para seleccionar el borde de la imagen Convertir el recuadro en un trazado exportar la ruta a Illustrator Abrir el archivo en ilustrador 'Guardar como ...' Imagen SVG (nota: NO svgcompressed) En el menú de opciones seleccione 'link' Hit save

Abra su archivo .svg en un editor de texto y tendrá sus coordenadas.