html - saber - ¿Cuál es una buena alternativa al uso de un generador de mapas de imágenes?

mapa de imagen html5

Question

Tengo una imagen grande y quiero hacer que se pueda hacer clic en ciertas secciones de la imagen. También quiero especificar la forma del área en la que se puede hacer clic (cuadrado, círculo, personalizado). Sin depender de Javascript, ¿cómo puedo usar CSS y HTML para crear un mapa de imagen interactivo? Con "puntos calientes" que se pueden desplazar y áreas resaltadas sin depender de generar coordenadas SVG. Todos los generadores de mapas de imágenes en línea que encontré utilizando Google no entregaron lo que percibo como una función básica estándar de cualquier herramienta de mapa de imágenes.

Answer 1

¿Por qué no usas una combinación de HTML / CSS en su lugar? Los mapas de imágenes son obsoletos.

Consulte aquí: http://jsfiddle.net/jsWdj/ para ver un ejemplo

Este por cierto es motor de búsqueda optimizado también :)

El código fuente sigue:

.image-map {
  background: url(''http://www.google.com/intl/en_com/images/srpr/logo3w.png'');
  width: 275px;
  height: 95px;
  display: block;
  position: relative;
  margin-top:10px;
  float: left;
}

.image-map > a.map {
  position: absolute;
  display: block;
  border: 1px solid green;
}

<div class="image-map">
    <a class="map" rel="G" style="top: 0px; left: 0px; width: 70px; height: 95px;" href="#"></a>
    <a class="map" rel="o" style="top: 0px; left: 70px; width: 50px; height: 95px" href="#"></a>
    <a class="map" rel="o" style="top: 0px; left: 120px; width: 50px; height: 95px" href="#"></a>
    <a class="map" rel="g" style="top: 0px; left: 170px; width: 40px; height: 95px" href="#"></a>
    <a class="map" rel="l" style="top: 0px; left: 210px; width: 20px; height: 95px" href="#"></a>
    <a class="map" rel="e" style="top: 0px; left: 230px; width: 40px; height: 95px" href="#"></a>
</div>

EDITAR:

Después de los numerosos puntos negativos que recibió esta respuesta, debo regresar y decir que puedo ver claramente que no está de acuerdo con mi respuesta, pero personalmente sigo creyendo que es una mejor opción que los mapas de imágenes.

Claro que no puede hacer polígonos, puede tener problemas en el zoom manual de la página, pero personalmente creo que los mapas de imágenes están obsoletos, aunque todavía están en la especificación html5. (Hoy en día tiene más sentido intentar replicarlos utilizando un lienzo html5)

Sin embargo, supongo que el público objetivo para esta pregunta no está de acuerdo conmigo.

También puede comprobar esto. ¿Todavía se utilizan los mapas de imágenes HTML? y ver la respuesta más votada sólo como referencia.

Answer 2

Esta es una buena herramienta si está generando un mapa de imagen poligonal solamente: http://niceutils.com/developer/imagemap-generator

Answer 3

Este es, en mi opinión, el mejor en línea (sin embargo, sin conexión, Dreamweaver es el mejor): http://www.maschek.hu/imagemap/imgmap

Answer 4

Este servicio es el mejor en la edición de mapas de imágenes en línea que encontré hasta ahora: http://www.image-maps.com/

... pero de hecho es un poco débil y personalmente ya no lo uso. Cambié a GIMP y es bastante bueno.

La respuesta de mobius no es incorrecta, pero en algunos casos debes usar imagemaps aunque parezca un poco viejo y oxidado. Por ejemplo, en un boletín, donde no puede usar HTML / CSS para hacer lo que quiere.

Answer 5

GIMP (Graphic Image Manipulation Program) hace un trabajo bastante bueno ... http://www.makeuseof.com/tag/create-image-map-gimp/

Answer 6

He encontrado que Adobe Dreamweaver es bastante bueno en eso. Sin embargo, no es gratis.

Answer 7

Puede utilizar la herramienta en http://www.image-maps.com/ como http://www.image-maps.com/

Answer 8

También está Mappa - http://mappatool.com/ .

Solo admite polígonos, pero definitivamente son las partes más difíciles :)