VOLVER
INDICE DE TUTORIALES

.

Tutorial de HTML:
1.- El Lenguaje Html 6.- URLs 11.- Imagenes
2.- Documento html 7.- Listas 12.- Mapas de imágenes
3.- Primeros pasos 8.- Estilos de carácter 13.- Formularios
4.- Tipografía 9.- Saltos y líneas 14.- Lista de ETIQUETAS
5.- Creación de enlaces (links) 10.- Tablas  

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&aacute;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>

MI CESTA más
0 productos
INFORMACIÓN
Privacidad
Condiciones
Formas de pago

 

http://www.abacocreacion.com
Soluciones Web - Bilbao - Vizcaya - Tel. 94 410 29 71 - Email: info@abacocreacion.com