 Atrás
|
Mapas HTML |
Próxima
|
Suponte que eres profesor de inglés y quieres hacer una figura humana que al pulsar sobre alguna de sus partes saltes a su término en ese idioma...
Este tipo de imágenes activas se llaman "Mapas HTML" y hay ocasiones en que son sumamente útiles. Si vieras el código de la imagen encontrarías lo siguiente:
Como notarás, se agregó el atributo usemap="#hombrecito" para indicar que las instrucciones de este mapa están guardadas en otro sitio.
En algún lugar debajo de la etiqueta IMG ha de existir código como el siguiente:
<map name=
"hombrecito"
>
Este código define cómo funciona el mapa. La primera línea indica el nombre, y la segunda instruye que el área activa correspondiente es un rectángulo (shape="rect"), las coordenadas del mismo (coords), el comentario (alt="Eye") y el enlace al que se llamará (en este caso, uno mixto).
La tercera línea es semejante, pero define un polígono e indica las coordenadas (en pares X,Y desde la esquina superior izquierda de la imagen) de cada uno de los puntos que lo componen. La cuarta línea nos dice que el área de fondo no tiene ningún enlace y la última cierra el mapa.
Este tipo de mapas se llaman "mapas del lado del cliente" (client-side maps) pues su ejecución depende que el browser tenga la capacidad adecuada para reproducirlo. Existen mapas del lado del servidor (server-side maps) pero ellos no los discutiremos aquí.
Es engorroso construir un mapa introduciendo a mano las coordenadas de cada uno de los puntos que definen las áreas. Por esa razón existen programas que te asistirán en esta tarea. Yo utilizo Mapedit 2.26 de Boutell.Com Inc. Puedes bajarte una copia de evaluación desde su sitio web en http://www.boutell.com.
Hasta ahora tenemos una gran cantidad de componentes disponibles para nuestras páginas web. Veamos a continuación cómo logramos colocar cada cosa en el sitio que le corresponde...
Este hombre te servirá para tu lección. Pero nota que no es una figura normal, pues cuando colocas el cursor sobre alguna de sus partes, el mismo se convierte en una mano indicando que esa área es un hiperenlace ("hotspot" en el argot técnico). Puedes, por ejemplo, pulsar sobre un ojo y saltarás a un documento llamado "body-parts.html" que te dirá cómo se dice "ojo" en inglés.
<area shape=
"rect"
alt=
"Eye"
coords=
"25,18,39,30"
href=
"body-parts.html#eyes"
>
<area shape=
"polygon"
alt=
"Leg"
coords=
"39,126,43,139,37,155,28,145"
href=
"body-parts.html#leg"
>
<area shape=
"default"
noref
>
</map
>
Inicio - Imágenes: Cómo incorporarlas - Width, Height, Alt y Align - Vspace, Hspace y enlaces - Tipos de Imágenes - Mapas HTML
| Página Inicial | Inicio de esta página |