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/ (alternativa https://www.image-map.net/) 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.

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:

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.