Un mapa de imágenes es una imágen con una o varias zonas clickeables. Es un buen recurso básico usando solamente puro html y da un buen toque a la web que estemos haciendo.

El ejemplo andando en este enlace.

Cuando tengamos la imagen, lo que debemos hacer es definir las zonas interactivas que queramos usar. Vamos a definirlas según el nombre que le queramos dar, lo cual es bueno para usar varios mapas de imágenes en la misma imágen. Es importante saber los tipos de areas que podemos usar. Tenemos:

• Rectángulo
• Círculo
• Polígono

El rectángulo se define con las coordenadas del punto superior derecho y el inferior izquierdo. De esa manera se unen entre si y se forma el rectángulo.

El círculo por otro lado, necesita la coordinada del punto del centro, y la longitud del radio.

Finalmente, el polígono, usa las coordinadas de los puntos en orden dentro de la imágen, sean los que sean. Es importante que sean en orden sino puede traer problemas de compatibilidad en ciertos navegadores.

Veamos el código del ejemplo:

Lo primero que hacemos es agregar la imágen como siempre, pero definiendo la propiedad usermap, con el nombre en este caso, mapa.
Luego debajo abrimos el tag map, y seguido de esto el nombre (name) que usamos en usemap. Dentro de este tag, tenemos que definir el area del mapa, en este caso, un rectángulo (rect) y las coordinadas de los puntos que vimos más arriba. Antes de cerrar el tag, agregamos el link a donde queremos redirigir, con el conocido href.

Nos queda cerrar los tags y hemos terminado.

discuss this topic to forum