Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

Mapas de imagen

Las páginas web de los últimos  años muestran un contenido cada vez más gráfico, acompañadas de efectos visuales como los cambios de imagen (mouseover). Sin embargo, muchos diseñadores parecen haber olvidado un tanto los mapas de imagen. Es una lástima que hayan sucumbido a esta moda de mouseovers. Sin duda, los mapas de imagen son una inmejorable herramienta para establecer la navegación web, y están llenos de ventajas. Son mucho más simples de preparar, fáciles de actualizar, y realmente sofisticados si se quiere. En este artículo los estudiaremos con algún detalle, y ofreceremos todo lo necesario para usarlos y aprovecharlos.

Qué es un mapa de imagen

La idea es verdaderamente simple. En una imagen cualquiera que está enlazada a nuestra página web, se definen unas áreas activas (hotspots) que actuarán como enlaces normales de html. Por ejemplo, y haciendo honor al nombre de mapa, puede tratarse de una representación de un país. Haciendo clic sobre las diferentes regiones se accede a una página que trata sobre ellas.

Existen dos tipos de definición de mapa de imagen. El primer tipo está basado en el servidor, el cual ejecuta las órdenes recibidas desde el cliente (el programa navegador). Este modelo está en desuso; a pesar de ser compatible con los navegadores más antiguos, presenta muchos inconvenientes técnicos y es más ineficiente.

Se puede afirmar que casi el 100% de los programas navegadores actuales admiten los mapas de imagen basados en el programa cliente. La definición de las áreas activas del mapa está dentro del html, de modo que se descarga con la página y es accesible instantáneamente, además de poder funcionar también sin conexión.

Preparar un mapa de imagen es relativamente sencillo, como veremos más adelante. Muchos diseñadores los han abandonado a favor de composiciones de imágenes troceadas más efectos de mouseover, a veces con la idea equivocada de que un mapa de imagen no admite este tipo de acciones (scripts). En realidad, a un mapa de imagen se le pueden asignar acciones como a un enlace normal o a un gráfico. Por ejemplo, se puede hacer cambiar una imagen al pasar por una zona activa del mapa. Esto puede implicar un poco de trabajo extra, pero no es en ningún modo complicado.

Ventajas que presentan los mapas de imagen

  • Es una forma fácil de adaptar los enlaces a una distribución de imágenes muy compleja para recrearla en forma de tablas y pequeñas imágenes. Basta recurrir a una imagen única y definir los hotspots.
  • Admiten los eventos de javascript que dotan de dinamismo a las páginas web.
  • Se pueden reutilizar una vez definidos, de manera que ahorran mucho trabajo a la hora de implantarlos.
  • Se puede actualizar todo un sistema de navegación para una web cambiando sólo las imágenes que constituyen los mapas. No hay que tocar para nada el código html, siempre que se hayan mantenido las zonas activas en posiciones constantes.
  • Un mapa de imagen es compatible prácticamente con cualquier navegador que existe. En cambio, determinados efectos de mouseover o dhtml funcionan sólo con las últimas versiones de navegadores, y a veces incluso son incompatibles con determinados browsers.
  • En caso de que no se carguen las imágenes, el mapa sigue siendo activo. Si se añade una etiqueta textual para describir las imágenes, ésta aparecerá en el navegador en caso de que no se muestren aquéllas.
  • Todas estas ventajas hacen de los mapas de imagen un instrumento de diseño y de navegación formidable. Lástima que los diseñadores se dejen arrastrar tanto por las modas.

Sugerencias de uso para los mapas de imagen

Realmente, las posibilidades que este sistema permite son muchas. Veamos algunas ideas interesantes:

La más obvia aplicación, es el construir una metáfora espacial, como un mapa geográfico, un plano de una edificación, partes de una máquina, un organismo, un objeto... Haciendo clic en una parte, vamos a una página o a una parte de ella donde se ofrece más información. A continuación sigue un ejemplo divertido (los enlaces no funcionan, pero sirve como una idea.)

monitor taza de café cajones papeles  

Son una excelente forma de definir la navegación en una web. Para ello puede utilizarse una metáfora de la navegación en el sitio (por ejemplo, para una web de una tienda, podría hacerse corresponder con las diferentes partes de un dibujo de un comercio real); también podemos emplear iconos, carpetas, imágenes representativas... nuevamente, el límite está en nuestra imaginación.

Puede activarse sólo la parte pertinente de un gráfico como enlace, y no su totalidad. Esto es muy útil para imágenes grandes; en este caso queda mejor que el enlace sea tan sólo una fracción de su área total.

Puede utilizarse como recurso didáctico; por ejemplo, incluir una imagen que contenga enlaces válidos sólo en las zonas correctas. Si la imagen incluye palabras, debería pulsarse sobre las que son acertadas.

Creación de los mapas de imagen

Preparar un mapa de imagen no puede ser más simple. La mayoría de programas editores de html incluyen esta opción. Se limita a seleccionar la imagen, y marcar sobre ella las regiones activas, a las que se asigna el enlace correspondiente. Los hotspots pueden tener forma rectangular (o cuadrada), circular o poligonal. Esta última opción es ideal para hacer que el área activa sea muy precisa.

 

Lamentablemente, para el usuario no profesional, los programas habituales gratuitos (FrontPage Express o Composer) no incluyen esta prestación. Si no disponemos de la posibilidad de generar mapas de imagen desde nuestro editor, existen algunas soluciones freeware específicamente destinadas a este fin, por ejemplo: MapMaker32; Meracl ImageMap Generator 3.4; Automata Web Hotspots Imagemapper 4.02; CoolMap 3.0; TS Imagemapper 2 y otros. Puede buscarse cualquiera de ellos en un servidor de programas como www.download.com o www.softonic.com.

 Mapas de Imagen a partir del código html.

¿Qué sucede si no disponemos de ningún programa que cree el mapa de imagen de forma visual? Deberemos trastear un poco con el código html. Esto puede intimidar a un principiante, si bien no es tan difícil teniendo a mano un programa de edición de imágenes, aunque sea muy básico, como PaintShop Pro o el gratuito IrfanView. Se trata de tomar nota de las coordenadas de los vértices de los rectángulos que definirán los "hotspots" (basta mover el cursor a las posiciones deseadas y fijarse en la barra de estado del programa.) A partir de estar coordenadas, asociaremos el enlace que deba abrirse al hacer clic.

Ejemplo de código html para un mapa de imagen:

En primer lugar, debe colocarse la imagen que actuará como mapa, en el lugar deseado. Esto puede hacerlo cualquier programa, incluso Composer o FrontPage. Sólo hay que añadir una etiqueta dentro de las mismas llaves, ismap usemap="nombre_del_mapa". Ésta indica que la imagen actuará como un mapa de imagen. Por ejemplo:

<img src="imagen_del_mapa.gif" width="720" height="528" ismap usemap="#mapa_principal">

Para que sea más fácil editar la página, al pie de la misma, puede pegarse la definición del mapa de imagen:

<map name="mapa_principal">
<area shape="rect" coords="503,15,583,50" href="guestbook.htm" ALT="Section_1">
<area shape="rect" coords="571,90,653,130" href="features.htm" ALT="Section_2">

</map>

Como vemos, el mapa tiene dos etiquetas: la primera, map, simplemente indica al programa navegador que se trata de un mapa, y el nombre asignado. La segunda etiqueta contiene las coordenadas de las áreas activas, y el enlace que les corresponde (que pueden tener un nombre alternativo ALT...) En este ejemplo hay dos áreas rectangulares activas, delimitadas por las coordenadas que se especifican tras COORDS.

Pueden definirse también zonas activas circulares y de forma poligonal, de una forma análoga a la descrita para áreas rectangulares. Para el polígono, figuran las coordenadas de cada punto; para el círculo, las coordenadas del punto de origen y el radio. Veamos los ejemplos respectivos:

<MAP NAME="Mapa_2">
<AREA SHAPE="polygon" COORDS="40, 15, 121, 40, 87, 140, 143, 125, 152, 191, 27, 208, 13, 117, 76, 97, 39, 42" href="guestbook.htm">
</MAP>

<MAP NAME="Mapa_3">
<AREA SHAPE="circle" COORDS="33,27,23" HREF="front.htm">
</MAP>

Nota: para el truco de pegar las instrucciones para que funcione un script tipo mouseover o semejantes, debemos ir al área correspondiente y pegar el fragmento de código dentro de los signos < y >.

Trucos e ideas

Los mapas de imagen, una vez definidos, pueden reutilizarse.

Ya hemos mencionado que los mapas de imagen pueden ahorrar mucho esfuerzo a la hora de remodelar una web. En efecto, si basamos la navegación en mapas de imagen, será suficiente cambiar el fichero de imagen al que van asociados para remozar el aspecto de todas y cada una de las páginas, sin necesidad de tocar para nada el html. Una idea muy interesante que aprovechamos en las páginas de Vigital.

Asignar una imagen diferente a cada sección de la web. A diferencia del truco anterior, aquí lo que haremos es mantener constante la definición del mapa de imagen y cambiar para cada sección de la web el archivo de imagen que lleva asociado. Es lo que hicimos también aquí. Una vez definido el mapa de imagen, para cada una de las secciones lo asociamos a una imagen diferente que muestra destacada el icono que corresponde, mientras que el resto aparece borroso. Utilizamos el mismo truco en TypePhases. Esta idea funciona, es extremadamente sencilla y confiere un aspecto cuidado y profesional.

Para la preparación de las imágenes seriadas que hacen falta en un proyecto como el que acabamos de comentar, pueden venir bien los filtros de los programas de gráficos. Por ejemplo, partiendo de una imagen de base podemos obtener diversas variantes coloreadas, que correspondan a las diferentes secciones de la web.

Es posible actualizar todos los mapas de imagen de un sitio modificando un sólo fichero. Basta asignar todos los mapas de imagen a una sola definición, situada en un fichero htm en concreto. Así nos aseguramos de que, si hiciera falta corregir algún enlace se podría hacer sin esfuerzo. En realidad, los editores web actuales pueden efectuar estos cambios de urls para todo un sitio sin dificultad, pero también puede recurrirse a este sencillo truco.

Para asignar acciones dinámicas tipo mouseover o semejantes a una zona activa de un mapa de imagen puede ser necesario recurrir a un pequeño truco, a menos que utilicemos un editor web muy moderno y potente (por ejemplo, NetObjects Fusion o Dreamweaver 3+ asignan acciones directamente a los hotspots.) Por ejemplo, para que al pasar por encima de un hotspot otra imagen cambie puede hacerse de la siguiente manera con un editor visual (sin programar en JavaScript):

Definimos el mapa de imagen con una imagen (A).

Colocamos en su posición la segunda imagen (B), la que va a cambiar al mover el ratón sobre partes del mapa.

Colocamos una imagen cualquiera (C) en otra parte de la página y definimos con ella la acción de cambio de imagen para B.

Abrimos una ventana con el código html y copiamos el código de esta acción que hace cambiar B.

Pegamos este código dentro de la definición del enlace del mapa de imagen que queremos utilizar para desencadenar la acción.

Ya podemos borrar la imagen C (sólo la utilizamos para preparar el script que ya hemos copiado y pegado.)