|
VOLVER
INDICE DE TUTORIALES
.
12. Mapas de imágenes
Puede hacer que parte de la imagen sea un enlace a otra página,
es decir, puede hacer un mapa sobre la imagen de manera que secciones
de la imagen sean enlaces. Las etiquetas usadas para esto son:
1.
Las etiquetas <map>.....</map> identifican que vamos
a crear un mapa de imágenes. Generalmente, lleva asociado el atributo
name= al que le sigue entre comillas el nombre del mapa.
2.
La etiqueta <area> define las áreas que
vamos a poder activar en esa imagen. A esta etiqueta le acompañan
los siguientes atributos:
o
shape= Entre comillas estableceremos el tipo de área a definir. Puede tratarse
de rect (rectangular), poly (poligonal) o circle (circular).
o
Coords= Entre comillas indicaremos
los pares de coordenadas de cada punto del área a activar. Estas
coordenadas las podemos averiguar utilizando un programa de edición
de imágenes. En las áreas rectangulares deben especificarse las
coordenadas de la esquina superior izquierda y las de la esquina
inferior derecha. En las poligonales especificaremos las coordenadas
de todos los vértices del área. En las circulares indicaremos las
coordenadas del centro del circulo y el
valor del radio.
o
Href= Como ya sabe, indica
la dirección, entre comillas, de la página web a la que accede si
pinchamos en un área determinada.
Finalmente, debe saber que para que una imagen sea tratada
como un mapa, además de el código anteriormente descrito, debe incluir
en la etiqueta de imagen correspondiente a la imagen a mapear
el atributo usemap="#nombre del mapa".
<IMG SRC="/graficos/foto1.jpg"
WIDTH=140 HEIGHT=210
BORDER=0 ALT="Una
foto " USEMAP="#foto1">
<MAP NAME="foto1">
<AREA SHAPE=CIRCLE
COORDS="60,56,47"
HREF="#" ALT="Suelo">
<AREA SHAPE=POLY
COORDS="3,182,36,178,
44,165,60,169,66,184,62,196,
43,201,35,190,0,193,0,183"
HREF="#"
ALT="Cielo">
</MAP>
<HTML>
<HEAD>
<TITLE>Ejemplo 13</TITLE>
</HEAD>
<BODY>
<H1>Mapas de imágenes</H1>
<IMG SRC="/graficos/foto1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Una foto;" USEMAP="#foto1">
<MAP NAME="foto1">
<AREA SHAPE=CIRCLE COORDS="60,56,47"
HREF="#" ALT="Cielo">
<AREA SHAPE=POLY COORDS="3,182,36,
178,44,165, 60,169,66, 184,62,196, 43,201,35, 190,0,193,0,183"
HREF="#" ALT="Cielo">
</MAP>
</BODY>
</HTML>
|