¿Cómo encontrar las coordenadas de un mapa de imagen en HTML?

Dominando los mapas de imagen en HTML

Cuando estás diseñando una página web y quieres que una sola imagen tenga diferentes zonas en las que se pueda hacer clic, los mapas de imagen son una herramienta clásica y muy útil. Para lograrlo, el atributo coords es el encargado de definir exactamente dónde se ubica cada zona interactiva.

Este atributo no trabaja solo; siempre va de la mano con el atributo shape, el cual determina la forma geométrica del área, ya sea un rectángulo, un círculo o un polígono complejo. Dependiendo de la figura que elijas, los números que introduzcas en las coordenadas cambiarán de significado (por ejemplo, radios para círculos o esquinas para rectángulos).

Un detalle clave que debes tener en cuenta al empezar a medir es que el punto de referencia, es decir, la esquina superior izquierda de cualquier imagen, siempre se representa con el par de valores 0,0. A partir de ahí, puedes calcular la posición exacta de tus enlaces visuales.