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

La noche del mapa de imagen

por Stuart Robertson

En los viejos tiempos, antes de que pensaramos demasiado en los estándares de la web o en la importancia de la accesibilidad, los diseñadores de webs utilizaban mapas de imágenes para dividir rápidamente una imagen en regiones, y enlazar cada una de esas regiones a URLs distintas. Los mapas de imagen tradicionales, sin embargo, no funcionan bien con los navegadores que sólo leen texto, y no son tan eficientes o versátiles como otras técnicas más modernas. Puedes encontrarlos todavía en uso en una página web antigua o en algún mapa complejo, pero la mayor parte de diseñadores web lo consideran una técnica antigua. Una técnica muerta.

Cuando colaboraba en un proyecto de ficción terrorífica, decidí al principio que haría lo posible para crear el código del sitio utilizando sólamente XHTML basado en estándares y CSS. Cuando el otro diseñador me envió su concepto para el sitio, empecé a desesperar. Quería que la página se pareciera a un libro antiguo y estropeado, con bordes rugosos y texturas alteradas por el tiempo. Los ítems de los menús estaban esparcidos por la página. ¿Cómo podría convertir un documento bien estructurado en algo que pareciera orgánico?

Pensé en los mapas de imagen.

Estaban terriblemente anticuados, pero un mapa de imágenes haría las cosas mucho más fáciles que trocear la imagen de fondo en docenas de piezas e intentar reunirlas todas juntas con CSS. Puede que estuviera loco al decidir utilizarlos de nuevo en aquel momento, pero sólo los métodos antiguos parecían ofrecer una respuesta. Decidí volver al laboratorio para ver si podría utilizar la ciencia moderna par resucitar esa técnica de diseño web...

Estos son los hechos tal como los conocemos

Para crear nuestro mapa de imagen, utilizaremos CSS para crear enlaces invisibles y los flotaremos sobre la imagen de fondo donde sea que los necesitemos.

>Primero creamos un div exterior que utilizaremos para aplicar la imagen de fondo. Nuestros enlaces irán dentro de otro div anidado para mantener el código organizado y para permitir que se puedan aplicar estilos a los enlaces en bloque. Este último div tambien puede venir bien para utilizar la hoja de estilos para crear efectos alternantes en el menú a través de CSS.

<div id="book">
 <div id="menu">

  ...
 </div>
</div>

Los enlaces individuales ahora ya se pueden colocar dentro del div interior. Asignamos a cada enlace su propio id, lo que nos permitirá posicionarlos de forma independiente en la página. Estos ids separados también funcionan como anclas, permitiendo que los usuarios seleccionen los enlaces directamente, sin que importe dónde están ubicados en la página, o su capacidad de hacer clic en ellos.

Para hacer el texto dentro de cada enlace invisible, necesitamos añadir otra etiqueta anidada. Prefiero utilizar una etiqueta que semánticamente no tiene sentido, tal como <i> porque proporcionan una pista visual en caso de que no haya hoja de estilo aplicada, lo que hace más fácil trabajar con ellas. También son muy cortas, lo que ayuda a tener código eficiente. Sin embargo, ciertamente se podría utilizar <span>, <em>, o cualquier otra etiqueta que te guste más. {Los saltos de línea están marcados como ». –Ed.}

<div id="book"> 
 <div id="menu"> 
  <a href="index.html" id="home"><i>Home</i></a>
  <a href="preface.html" id="preface"><i>Preface</i></a>

  <a href="stories.html" id="stories"><i>Stories</i></a>
  <a href="galleries.html" id="gallery"><i>Galleries»

  </i></a>
  <a href="forums.html" id="forum"><i>Forum</i></a>
  <a href="mementos.html" id="mementos"><i>Mementos»

  </i></a>
  <a href="credits.html" id="credits"><i>Credits</i></a>
  <a href="indicia.html" id="indicia"><i>Indicia</i></a>

 </div>
</div>

Este es todo el XHTML necesario. Puedes ver los resultados en el ejemplo 1. Ahora podemos pasar a crear el efecto de mapa de imagen con nuestra hoja de estilos.

Guiados por un plan maestro

En la hoja de estilos añade un color de fondo para el documento en el body y haz que los márgenes y espaciados internos sean 0. Utilizaremos posicionamiento absoluto, y esto nos va a ayudar en los cálculos.

body {
  background-color: #000;
  margin: 0;
  padding: 0;
  }

El fondo para nuestro mapa de imagen se aplica al div exterior. Deberías indicar un alto y un ancho apropiados para asegurarte de que se muestra por completo.

#book { 
  background-image: url(imagemap/images/»
   bookpages.jpg);
  height: 595px;
  width: 750px;
  }

Cualquier estilo que aplicas a la mayoría de enlaces se puede definir de una sóla vez. Las reglas más específicas servirán para alterar los atributos de los enlaces individuales si es preciso. Utiliza posicionamiento absoluto e incluye un valor por defecto de alto y ancho, con height, width, y top para todos los enlaces. Éste también es un buen momento para asegurarse de que desaparece el subrayado.

#menu a {
  position: absolute;
  height: 38px;
  width: 88px;
  top: 31px; 
  text-decoration: none;
  }

Para ocultar el texto dentro de los enlaces y aún así mantener su capacidad de poder ser pulsados, usaremos un selector de CSS para identificar el texto en itálicas dentro del enlace contenido en el div anidado, y haremos que su visibilidad, visibility, sea hidden, oculta. Es importante incluir un enlace de texto con significado, aunque será invisible para la mayoría de usuarios. Esto asegura que el sitio será accesible para los navegadores que no soportan CSS y los usuarios que lo ven con una hoja de estilos alternativa.

#menu a i { visibility: hidden; }

Una vez el CSS general está en su lugar, podemos colocar en posición cada uno de los enlaces individuales. Para hacerlo más eficiente, los enlaces que comparten algún atributo como left o top, se pueden definir juntos.

a#credits, a#indicia { top: 531px; }
a#home { left: 101px; }
a#preface { left: 221px; }
a#stories { left: 311px; }
a#gallery { left: 431px; }
a#forum { left: 526px; width: 61px; }
a#mementos { left: 591px; width: 98px; }
a#credits { left: 431px; }
a#indicia { left: 591px; }

Cuando se aplican al XHTML del documento, los enlaces del menú flotarán independientemente sobre la imagen de fondo. Si los colocamos sobre áreas de la imagen que parecen enlaces, ya habremos terminado. Colocar los enlaces adecuadamente exigirá bien cálculos cuidadosos o un poco de prueba y error.

Los mapas de imagen en CSS pueden utilizar el pseudoelemento :hover para definir un estilo diferente para cada enlace al pasar el ratón por encima. Esto nos permite flotar nuevas imágenes por encima del fondo siempre que el usuario mueva su ratón sobre una de las áreas de enlaces invisibles.

a#home:hover { background-image: url(imagemap/»
   images/homeglow.jpg); }
a#preface:hover { background-image: url(imagemap/»
   images/prefaceglow.jpg); }
a#stories:hover { background-image: url(imagemap/»
   images/storiesglow.jpg); }
a#gallery:hover { background-image: url(imagemap/»
   images/galleryglow.jpg); }
a#forum:hover { background-image: url(imagemap/»
   images/forumglow.jpg); }
a#mementos:hover { background-image: url(imagemap/»

   images/mementosglow.jpg); }
a#credits:hover { background-image: url(imagemap/»
   images/creditsglow.jpg); }
a#indicia:hover { background-image: url(imagemap/»
   images/indiciaglow.jpg); }

Un fallo en Internet Explorer que hace que las imágenes de rollover no desaparezcan cuando deben se puede arreglar añadiendo border: none al estado :hover de todos los enlaces del mapa de imagen en CSS.

a#home:hover,
a#preface:hover, 
a#stories:hover, 
a#gallery:hover, 
a#forum:hover,   
a#mementos:hover, 
a#credits:hover, 
a#indicia:hover { border: none; } 

Puedes ver los resultados finales de nuestro mapa de imágenes en CSS en el Ejemplo 2.

Post mortem

Utilizar grandes imágenes de fondo no es muy eficiente para el ancho de banda, pero puede producir un diseño atractivo y proporcionar a los usuarios con conexión rápida una experiencia visual más rica. Puesto que los mapas de imagen en CSS utilizan XHTML basado en estándares, podemos emplear un alternador de hojas de estilo para ofrecer una vista alternativa para conexión de poco ancho de banda.

Un agradecimiento especial a Nate Piekos y Shane Clark por su trabajo en Dead Ends, Massachusetts, de donde el mapa de imagen y otras cosas tenebrosas fueron sacados de la tumba.

Stuart Robertson es undiseñador de webs que vive en Ontario, Canadá.

[ Este artículo ha sido traducido con permiso de A List Apart y su autor.]