Mapas de imagen y HTML5

Question

Esta pregunta es más filosófica que técnica.

me he entrenado como un desarrollador web de vuelta cuando los desarrolladores web fueron llamados webmasters y mi herramienta de elección fue FrontPage, pasar a Evrsoft primera página 2000.

Esa fue la última vez que utiliza un mapa de imagen HTML .

Ahora es HTML5, AJAX, lienzos vectoriales, CSS 3D, jQuery, almacenamiento local, Safari con pantalla táctil, el nombre. El mapa de la imagen se ha desvanecido en una oscuridad donde ni siquiera Google presenta demasiados resultados relevantes; una entrada obligatoria de W3C Schools y algunas publicaciones en el foro desde 2004.

Obviamente, crear una navegación en el sitio web o trivialidad similar usando un mapa de imagen era una mala idea en ese momento y ciertamente inexcusable hoy en día.

Pero ahora tengo una tarea para crear un área en la que se puede hacer clic en un polígono sobre un div con una imagen de fondo.

No tendré ningún problema para hacer esto en el mapa de imágenes, ya que parece diseñado para un caso de uso exactamente así, y aunque no he hecho pruebas, no me imaginaba que ningún navegador dejara caer una elemento que funcionó maravillosamente durante años. Pero no puedo evitar pensar que debe haber una mejor manera de hacerlo hoy.

Mi filosofía de creación web es desarrollar para IE5.5, y luego diseñar para Chrome edge. Esto significa que el sitio primero necesita trabajar en un nivel básico incluso en el navegador más anticuado, y luego comenzar a agregar JS & CSS para hacerlo más bonito, más usable, más rápido, más simple, más amigable y mejor.

Como tal, aunque sé que podría hacer un lienzo en Raphaël y agregar todo tipo de efectos y objetos de acción rápida, creo que hacer una funcionalidad tan simple como esto no debería requerir una biblioteca JS de 89 kb (o X kb) . O incluso JS en absoluto.

No sé si CSS3 tiene capacidades para definir áreas poligonales, pero al mismo tiempo que reconozco las grandes posibilidades introducidas por CSS3, prefiero mantener todo lo definido allí como un estilo no esencial que se degradaría con gracia.

Así que en el mundo WebDev de hoy, lo que sería la mayoría de la manera cruzada navegador para definir un área de clic poligonal (preferentemente de una manera que es grabbable por un jQuery .hover(), o al menos una CSS :hover), que no es dependiente en JavaScript o CSS atributos disponibles en una minoría de navegadores? ¿El mapa de imágenes es realmente la única forma de hacerlo? ¿Qué pasa con los dispositivos móviles?

Answer 1

¿Por qué el uso de mapas de imágenes para la navegación es inexcusable? Es una herramienta como cualquier otra; tiene un tiempo y lugar. El uso de mapas de imagen con mejoras de JavaScript es retrocompatible, se degrada graciosamente y tiene 100% de compatibilidad con el navegador. No necesitan un complemento como flash. Han sido compatibles prácticamente desde el comienzo del navegador web. El hecho de que algo sea antiguo no significa que no sea útil; todo lo contrario, significa que está bien soportado.

Escribí un complemento jquery llamado ImageMapster para agregar efectos a los mapas de imagen para que pueda crear imágenes interactivas sin usar el flash. Sería fácil implementar una herramienta que tuviera la misma funcionalidad sin soporte de Javascript reemplazando con una lista en esos casos. Personalmente, creo que tratar de escribir para la web sin javascript es como tratar de conducir un automóvil sin neumáticos. El 99% de la web ya no funciona sin ella. Esto no es en 1995. Pero si realmente te preocupa, lo bueno de los imagemaps es que la funcionalidad básica de navegación aún funciona. No hay forma de lograr eso solo con CSS, ni siquiera con CSS3 si tiene áreas con formas irregulares.