Imágenes mapa
Empezamos a adentrarnos ya en algunas de las características más avanzadas del lenguaje HTML. En este caso es el turno de las imágenes mapa.
Con bastante probabilidad el lector habrá visitado alguna página en la que había alguna imagen en la que se podía pulsar en diferentes partes para acceder a diferentes destinos. Estas son las llamadas imágenes mapa y en la gran mayoría de páginas Web podemos encontrar una. En un principio para realizar las imágenes mapa era necesario usar determinados programas especiales que debían estar en el servidor Web, sin embargo con el estándar HTML 3.2 se incluyeron algunas etiquetas HTML que nos permitirán realizar estas imágenes mapa con mayor facilidad.
Imágenes mapa en el servidor
Este era el único método usado inicialmente para crear las imágenes mapa, para usarlo debemos instalar en el servidor Web (si tenemos acceso a él) algún programa dedicado a este fin. Los más usados son los del CERN y NCSA. Para usar este método debemos llevar a cabo los siguientes pasos:
-
Crear un archivo de configuración del mapa con el código del programa usado para indicar las zonas activas y donde nos dirigirán el pulsar sobre ellas. Para averiguar como es el código a usar tendremos que leer la documentación que acompañe al programa, pero en general no será muy complicado. El archivo con el código tiene en general la terminación '.map'.
-
Escribir el código HTML de manera que la imagen sea un enlace al archivo con su código. Además debemos incluir el atributo ISMAPen la etiqueta IMG:
<A HREF="img.map"<
<IMG SRC="img.gif" ISMAP>
</A>
|
En la página de POST-IT, figura 5.29, podemos ver un ejemplo de imagen mapa en el servidor.
En este caso la imagen representa una mesa con diferentes objetos encima cada uno de los cuales representa una sección del sitio Web al que saltaremos si pulsamos sobre él.
La gran ventaja de este método consiste en que funcionará con cualquier navegador, el único requisito es tener el programa en el servidor Web. El principal inconveniente es que, por lo general no todo el mundo tiene acceso al servidor Web y no puede instalar los programas que necesita, por otro lado tener el código del mapa en un archivo aparte complica su modificación.
Para resolver estos problemas apareció el segundo método en el que el código de todas las imágenes mapa de una página podrán estar en esa misma página y además se creará usando etiquetas del lenguaje HTML.
Imágenes mapa en el cliente
Este tipo de imágenes reciben el nombre de imágenes mapa en el cliente porque será el navegador de cada usuario (cada cliente) el que se encargará de leer el código cuando se pulsa sobre la imagen mapa y averiguar la dirección de destino. No es necesario ningún programa especial en el servidor Web.
En este caso nos bastará usar la etiqueta IMG para crear la imagen, eso sí con un nuevo atributo: USEMAP . Por otro lado ahora deberemos usar algunas otras etiquetas nuevas para crear el mapa de la imagen. La creación de este tipo de imágenes mapa consta por tanto de dos pasos:
-
Definición de la imagen como imagen mapa, así como informar de dónde está el mapa a usar. La sintaxis es sencilla:
<IMG SRC="imagen.gif"
USEMAP="#mapa1">
|
La imagen es, en este caso, una con formato GIF de nombre imagen.gif. En este ejemplo usamos un mapa llamado mapa1, como vemos la forma de referirnos a él es igual que con las anclas: anteponiendo el símbolo '#'. En esta ocasión el mapa estará en el mismo documento HTML, pero esto no tiene porque ser así. Si, por ejemplo, usamos una imagen mapa en todas y cada una de las imágenes de un sitio Web, podemos poner el mapa en la página principal (index.htm) y después referirnos a él como:
<IMG SRC="imagen.gif"
USEMAP="index.htm#mapa1">
|
Más aún, no estamos limitados a que el mapa esté en nuestro sitio Web, puede estar en cualquier lugar del WWW, para referirnos a él tendremos que poner la dirección URL de la página dónde esté seguido por un # y el nombre del mapa.
-
El segundo paso es la creación del mapa. Para ello usaremos una nueva etiqueta: MAP. Esta etiqueta tendrá una instrucción de inicio, <MAP ...> , y otra de fin,</MAP> entre las cuales definiremos las diferentes zonas activas de la imagen mapa. El único atributo de esta etiqueta es el necesario para darle un nombre: NAME, y se usará de la siguiente manera:
<MAP NAME="mapa1">
...
</MAP>
|
A continuación debemos crear las formas a las que nos referíamos antes. Para llevar a cabo esta labor usaremos otra etiqueta más: AREA que deberá ser una vez para cada zona de la imagen mapa y que consta de cuatro atributos:
-
HREF: Este atributo es idéntico al del mismo nombre de la etiqueta A. Con él debemos indicar la página o dirección URL a la que saltaremos cuando pulsemos sobre esta zona activa.
-
ALT: Sirve para incluir un texto alternativo.
-
SHAPE: Define la forma de la zona, puede tener tres valores: rect (zona rectangular), circle (zona circular) y poly (zona poligonal).
-
COORDS: Coordenadas de la zona, su valor depende de la forma de esta. En la figura 5.30:
podemos ver como será en función de si el valor de SHAPE es...
-
rect: COORDS toma 4 valores separados por comas que representan las coordenadas de el vértice superior izquierdo y el inferior derecho.
-
circle: COORDS toma 3 valores. Los dos primeros son las coordenadas del centro y el tercero es el radio.
-
poly: COORDS tiene un número indefinido de valores que representan las coordenadas de cada uno de sus vértices.
Como ejemplo vamos a imaginar una imagen de 300x100 y vamos a crear un mapa que la divida en dos:
<MAP NAME="mapa2">
<AREA SHAPE="rect"
COORDS="0,0,150,100"
HREF="izda.htm">
<AREA SHAPE="rect"
COORDS="150,0,300,100"
HREF="dcha.htm">
</MAP>
|
No ha sido complicado, ¿no?
|
Las coordenadas vistas hasta ahora están dadas en pixeles. También pueden darse en porcentajes, aunque esto sólo suele ser útil para el caso de zonas rectangulares. La sintaxis a usar sería por ejemplo: COORDS="0,0,50%,40%" |
Existe un quinto atributo, NOHREF, que puede usarse en lugar de HREF para indicar que una determinada zona no debe conducir a ningún sitio al pulsar sobre ella. Este atributo no toma ningún valor.
Si dos o más zonas se superponen se impone la que fuera definida primero. Por esta razón si existe alguna zona con NOHREF suele ponerse la primera de la lista.
El problema las imágenes mapa en cliente radica en que no todos los navegadores están preparado para este tipo de imágenes mapa, y por tanto no podemos estar seguros de que todos los vistantes vayan a poder disfrutar de nuestra imagen mapa.
|
Siempre que usemos una imagen enlace y especialmente si esta es una imagen mapa es importante crear esos mismos enlaces con textos para que se pueda acceder a ellos con navegadores de sólo texto o por si existe algún problema con la visualización de las imágenes. |
|
Hay que tener mucho cuidado con el uso de los atributos WIDTH y HEIGHT con las imágenes mapa, ya que la imagen variará sus dimensiones, pero el mapa no, por tanto las zonas que hayamos definido no servirán. |
EJERCICIO 5.1: Llegados a este punto queremos proponer un ejercicio sencillo a los lectores. Éste consistirá en la creación de un mapa para la imagen de la figura 5.31:
incluida en el archivo ej5-1.zip, y usarla para sustituir el menú creado con una lista en la página de la agencia de viajes Los Alpes creada en la práctica 2. Además habrá que proporcionar enlaces en modo texto alternativos a la imagen (lo habitual es que estén en una sola línea. En el mismo archivo (extra.zip) se ofrece una solución a este ejercicio.
