Generador de coordenadas de imagen – Imagemap


Html tiene un código especial para especificar que secciones de una imagen queremos tomar como un “área” y dicho tag contenga un enlace determinado. Nunca lo había utilizado, sabía que existía pero fue hasta hoy que lo necesitaba para un proyecto.

Se trata de tomar una imagen, determinar regiones o secciones a través de coordenadas, puntos X y puntos Y para formar un área. Las áreas pueden ser una simple línea, un círculo o poly-línea generando cualquier figura. Esta técnica he visto que se usa para realizar algún menú especifico o tener un mapa real para dividir por país, estados o cualquiera que se nos ocurra, aunque tiene muchas limitaciones y si quieres algo en específico, tendrás que generar arduamente el código para manipularlo, las áreas se limitan a hacer la división y a aceptar un enlace, cualquier otra funcionalidad deberás fabricarla tú mismo.

La página es http://imagemap-generator.dariodomi.de/ solo debemos subir una imagen, crear las secciones o divisiones, bastante útil realizarlo de esta manera, al mismo tiempo te genera el código HTML con las coordenadas, solo queda copiar y pegar y listo.

imagemap-generator

En esta sección trabajamos con puntos, así que podemos crear las áreas como las necesitemos y luego colocarle un enlace a dicha área, en este ejemplo muestro como al teclado le estamos creando una sección:

imagemap-generator2

Cuando creamos nuestro archivo web y agregamos la imagen en conjunto con el mapa de coordenadas, podremos hacer clic sobre él. Nota: las áreas realizadas no generan ningún efecto hover ni se les puede agregar, ya que no se trata de un elemento común de html.

imagemap-generator3

Comparte
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *