¿Se siguen utilizando los mapas de imágenes HTML?

113

¿La gente todavía usa los antiguos mapas de imágenes HTML? Los que tienen:

<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...

¿O hay una alternativa mejor y más nueva?

html imagemap

— ss888
fuente

1

Cuando preguntes si hay algo mejor o no, debes dar un medio de comparación. ¿Mejor de qué manera o con qué propósito? Hay herramientas más poderosas que los mapas de imágenes a nuestra disposición, más complejas también ...

— Jeff Parker

2

Buen punto: no he usado un mapa de imagen durante mucho tiempo y pensé que podría haber sido reemplazado por un método mejorado de codificación.

— ss888

1

La funcionalidad basada en Javascript / capas y Flash han reemplazado los mapas de imágenes en casi todo lo que encuentro ... No recuerdo la última vez que vi uno en servicio activo. Sin embargo, si tiene un propósito específico en mente, una respuesta más específica podría estar más disponible :)

— Jeff Parker

21

Prefiero evitar Flash en este día y edad lol.

— ss888

4

Si está buscando algo rápido de hacer, rápido de ejecutar y solo levemente maligno, los mapas de imágenes funcionarán. En mi opinión, no existe un reemplazo ampliamente admitido que haga el trabajo a la misma velocidad. Ahora, si tuviera tiempo para SVG, Canvas y no le importara excluir IE de su lista de navegadores compatibles ...

— Jeff Parker

53

Sí, la gente todavía usa mapas de imágenes. Una alternativa sería colocar elementos usando posicionamiento absoluto y CSS, pero eso no es necesariamente mejor. Tampoco le permite tener formas como en los mapas de imágenes.

— JohnP
fuente

Ok, ¿entonces los mapas de imágenes HTML siguen siendo buenos? ¿Qué tal agregar efectos de desplazamiento / desplazamiento?

— ss888

Mi principal problema con los mapas de imágenes es que, a diferencia de las imágenes con las que se asocian, no se ajustan al tamaño del navegador o de la pantalla. Espero que el OP investigue los formatos SVG

— Martin

2

tienes que escalarlo con el tamaño de la imagen. Haciendo que el tamaño de su imagen sea relativo al tamaño de la ventana. luego siempre comparando esa relación ancho / alto con la relación del mapa de la imagen, y luego usando javascript para sobrescribir las coordenadas. El controlador de eventos de tamaño de imagen basado en jquery es $ (ventana) .resize (function () {.... yourcode ...});

— skidad el

46

Están en la especificación HTML5 , por lo que no quedarán obsoletos.

Todavía puede usarlos libremente, ciertamente todavía tienen su lugar en el desarrollo web. O podría decir que existen esas raras ocasiones en las que se puede resolver mejor algo con un mapa de imágenes.

— kapa
fuente

19

Una solución alternativa al uso de CSS o mapas de imágenes sería hacer uso de gráficos SVG incrustados en HTML dom.

En este tutorial se describe un tutorial sobre cómo lograr efectos de mouseover utilizando esta técnica: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

La conclusión clave es que los elementos SVG también desencadenan eventos tradicionales de dom, incluidos onmouseover y onmouseout .

— Norman H
fuente

1

+1 SVG es la mejor alternativa directa a los mapas de imágenes, ya que la interacción puede ser con cualquier forma arbitraria. Se puede crear algo muy similar a los mapas de imágenes donde las coordenadas vectoriales recortan imágenes de píxeles de trama, dando a los elementos SVG un relleno de imagen . Pero incluso entonces, los mapas de área pueden ser mejores en algunos casos (son más simples y no recortan la imagen, lo que a veces puede ser deseable).

— user56reinstatemonica8

18

Sí, los mapas de imágenes html son buenos, especialmente si desea que su área sea un polígono. También puede agregar efectos de rollover a su mapa con javascript. Hay un buen tutorial y una demostración aquí:

http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484

— LostLin
fuente

8

+1: si bien puede hacer mucho con CSS y el posicionamiento absoluto, los mapas de imágenes siguen siendo la única forma de detectar el desplazamiento en un área poligonal no rectangular.

— Blazemonger

10

Los mapas de imágenes todavía tienen especificaciones HTML5, compatibles con todos los navegadores.

Se pueden adaptar al diseño receptivo utilizando jQuery RWD Image Maps: https://github.com/stowball/jQuery-rwdImageMaps

Detecta y redimensiona automáticamente las coordenadas de los mapas de imágenes.

También está disponible para desarrolladores de Wordpress como complemento: http://wordpress.org/plugins/responsive-image-maps/

Solución sencilla y eficaz.

— Daniele B
fuente

9

Sí, sigo usando mapas de imágenes, sin embargo, mi último proyecto usó Raphaël. Fue bastante fácil poner algo en funcionamiento.

http://dmitrybaranovskiy.github.io/raphael/

Desde su sitio web:

Raphaël ['ræfeɪəl] utiliza la recomendación SVG W3C y VML como base para crear gráficos. Esto significa que cada objeto gráfico que crea también es un objeto DOM, por lo que puede adjuntar controladores de eventos JavaScript o modificarlos más tarde. El objetivo de Raphaël es proporcionar un adaptador que hará que el dibujo de arte vectorial sea compatible con todos los navegadores y sea fácil.

Buen ejemplo de mapa de imagen simple:

http://dmitrybaranovskiy.github.io/raphael/australia.html

— David Newcomb
fuente

2

No le habría costado mucho arreglar el enlace usted mismo en lugar de quejarse y votar negativamente :(

— David Newcomb

2

Estimado David, eliminé el voto negativo. ¿Cómo quieres que arregle el enlace que simplemente está roto? Quitaría http://raphaeljs.com/completamente y solo proporcionaría el ejemplo de Github.

— orschiro

6

El objetivo de los sitios de pila es la colaboración. Si ves un enlace roto, arréglalo si puedes. No lo piense en términos de enlaces rotos, son indicadores rotos de recursos. Si el recurso se ha movido, actualice el enlace para que apunte a la nueva ubicación del recurso: eso es lo importante. Raphaeljs solía tener su propio sitio, pero obviamente se ha trasladado a GitHub. ¿Enviamos a las personas a Google para que descubran dónde vive ahora? ¿O les ayudamos a salir de aquí? El ejemplo de Australia es el mismo ejemplo, simplemente vive en un lugar diferente.

— David Newcomb

El http://raphaeljs.com/enlace eventualmente se romperá cuando expire el registro de dominio, pero ahora hay una redirección para dar a todos (en el mundo) la oportunidad de actualizar sus enlaces. Quizás @orschiro podría comenzar con el del artículo y agregar al esfuerzo colaborativo aquí en SO.

— David Newcomb

1

Entendido, gracias David! Actualicé la respuesta y arreglé el enlace. :-)

— orschiro

4

Si bien ya rara vez los veo usados en sitios web modernos, parece que mis clientes los usan en sus campañas de correo electrónico. Sin embargo, he notado y confirmado que hay algunos problemas de escala con el sistema de coordenadas en dispositivos móviles.

** Sé que este hilo es antiguo, solo estaba investigando un poco más sobre esto para un problema reciente de campaña de correo electrónico y pensé que podría ayudar a alguien más en el futuro.

Tercero editar

La pregunta en litmus.com sobre el soporte de mapas de imágenes es del 04/2014

Los mapas de imágenes no admiten etiquetas ALT, cuando las imágenes no se cargan, el texto ALT no se muestra en algunos clientes.

El uso de mapas de imágenes generalmente da como resultado el uso de imágenes grandes que pueden causar problemas de entrega y obstaculizar la velocidad de descarga (especialmente importante para los usuarios de dispositivos móviles).

Y lo más importante, iOS (iphone / ipad) no escala las coordenadas del enlace del mapa de la imagen cuando se escala la imagen, lo que rompe los enlaces. Dado que iOS representa una gran mayoría de correos electrónicos abiertos (iPhone + iPad = 38% a través de http://emailclientmarketshare.com/ ), esto es importante.

— husillo79
fuente

0

Sí, todavía se usa

Un mapa de imagen le permite al usuario hacer un hipervínculo a muchas páginas haciendo clic en diferentes partes de una imagen. Simplemente usando el mapa de imagen creamos listas de coordenadas relacionadas con un área específica de la misma imagen y le damos el hipervínculo a una ubicación diferente. Al usar esto dentro de una sola imagen, damos múltiples enlaces.

Más

— Srikrushna
fuente

-2

El mapa de imagen es una opción bastante interesante en html y html5, todavía se están usando y personalmente me encanta, por lo tanto, encuentro un uso en dispositivos móviles, mi problema está relacionado con la escala

sí, lo he experimentado yo mismo, sin embargo, soy un estudiante inscrito en html html5 y, para los ingenieros, me gustaría seguir el enlace de w3chools

http://www.w3schools.com/html/html_images.asp

obtendrá mucho de esta [página

— Shoua Iqbal
fuente