Tutorial de HTML

Ejercicio 8

Elegimos una imagen, y la insertamos en nuestro documento con los atributos de altura, anchura, borde, etc. que deseemos (ver lección 10).

A continuación añadimos la etiqueta <map> con su atributo name, y pondremos un nombre a la imagen. En nuestro ejemplo <map name="meninas">. Quedará así:

<img src="meninas.jpg" width="188" height="211" hspace="5" vspace="5" align="left" /><map name="meninas">

Ahora escribimos la etiqueta <area> (con sus correspondientes atributos) por cada una de las áreas que establezcamos. El efecto que queremos conseguir es el de la ilustración siguiente:

Para ello crearemos tres áreas interactivas. A cada una le hemos dado una forma distinta para que puedas apreciar las diferentes maneras de definirlas.

<area shape="circle" coords="133,234,40" href="#"/> Corresponde al área circular. Las coordenadas 133 y 234 indican la situación del centro del círculo y 40 indica el radio en puntos.

<area shape="rect" coords="40,105,87,227" href="#" /> Corresponde al área rectangular. Las coordenadas 40 y 105 indican la esquina superior izquierda, y las coordenadas 87 y 227, la esquina inferior derecha.

<area shape="poly" coords="223,185,203,223,198,260,229,285,260,299,249,
228,241,190" href="#" /> Es un área de forma poligonal. Y todos los valores expresados indican las coordenadas de sus diferentes vértices.

Añadiendo lo anterior al código ya escrito, resultará lo siguiente:

<img src="meninas.jpg" width="188" height="211" hspace="5" vspace="5" align="left" /><map name="meninas"><area shape="circle" coords="133,234,40" href="#" /><area shape="rect" coords="40,105,87,227" href="#" /><area shape="poly" coords="223,185,203,223,198,260,229,285,260,299,249,
228,241,190" href="#" />

Antes de cerrar cada etiqueta área, añadiremos dentro de ellas el atributo href= "url" con la dirección o ruta donde queramos acceder cuando pulsemos sobre el área correspondiente.

Ya sólo queda activar el mapa. Para ello debemos incluir el siguiente atributo dentro de la etiqueta <img>:

usemap"#nombre que hemos dado al mapa". En nuestro ejemplo: usemap="#meninas" (no olvidar #).

Pasa el ratón por la imagen y observa cómo aparece el cursor en forma de mano cuando está encima de alguna de estas áreas. Como ves, las áreas no se visualizan en el navegador.