Unidad 9. Imágenes (X)

9.10. Mapa de imagen

Un mapa de imágenes es una imagen sobre la que podemos definir áreas con enlaces. Es decir, podemos poner varios enlaces distintos en una misma imagen.

El mapa lo definimos con la etiqueta <map></map>. El mapa suele llevar los atributos id y name para identificarlo.

Dentro del mapa, se van definiendo las áreas con etiquetas <area />. Como mínimo, llevan tres atributos:

• shape, que es la forma del área, pudiendo ser rect (rectángulo), circle (círculo) o poly (polígono).
• coords indica las coordenadas del área, en píxeles. Depende de la forma. Por ejemplo, un rectángulo tiene cuatro valores: inicio-x, inicio-y, fin-x, fin-y. Un círculo, centro-x, centro-y y el radio, y un polígono un valor x e y para cada punto.
• href es la dirección del enlace.

Después, para asociar el mapa a la imagen, añadimos a la imagen el atributo usemap, como se ve en el siguiente ejemplo.

Para nuestro sitio de ejemplo, vamos a crear el siguiente mapa para acceder a las categorías, que colocaremos en la página inicial:

<img src="imagenes/mapa_categorias.jpg" alt="Categor&iacute;as" width="600" height="500" usemap="#Mapa" />
<map name="Mapa" id="Mapa">
 <area shape="rect" coords="0,0,300,250" href="flores/exoticas.html" alt="Flores ex&oacute;ticas" 
       title="Galer&iacute;a de flores ex&oacute;ticas" />
 <area shape="rect" coords="301,0,600,250" href="flores/ornamentales.html" alt="Flores ornamentales" 
       title="Galer&iacute;a de flores ornamentales" />
 <area shape="rect" coords="0,251,300,500" href="flores/plantas.html" alt="Plantas" 
       title="Galer&iacute;a de plantas" />
 <area shape="rect" coords="301,251,600,500" href="flores/silvestres.html" alt="Flores silvestres" 
       title="Galer&iacute;a de flores silvestres" />
</map>

Observa que la imagen mide 600 px de ancho y 500 px de alto. La hemos dividido en cuatro áreas, rectangulares: arriba izquierda, arriba derecha, abajo izquierda y abajo derecha. A cada una, le hemos asignado el enlace a la categoría correspondiente, y le hemos añadido el atributo title para que se muestre el texto al pasar el cursor.

La imagen utilizada, la hemos generado con GIMP utilizando las imágenes mapa_exoticas.jpg, mapa_ornamentales.jpg, mapa_plantas.jpg y mapa_silvestres.jpg que puedes encontrar en la carpeta de ejercicios. En los videotutoriales del curso puedes ver detalladamente cómo fusionamos las imágenes.

Puedes ver como ha quedado la página pulsando aquí.

 Cursos Informática Gratuitos