Unidad 13. Ilustraciones para Web (II)



13.2. Mapas de imagen

Crear un mapa de imagen es colocar enlaces sobre una imagen. Podemos dividir una imagen en varias áreas, y que al pulsar sobre cada una de ellas nos lleve a un enlace distinto. Por ejemplo, en la siguiente imagen, al pulsar sobre cada icono accedemos al curso de aulaClic correspondiente.

Ir al curso de Flash CS4 Ir al curso de Dreamweaver CS4 Ir al curso de Illustrator CS4 Ir al curso de Photoshop CS4 Ir al curso de Flash CS4

Aunque el resultado sea una única imagen, nosotros trabajaremos con distintos objetos, cada uno de los cuales puede tener un enlace. Para crear un enlace en un objeto, lo seleccionamos e introducimos la dirección en el campo URL del panel Atributos. En Mapa de imagen, seleccionamos si la zona del enlace será un rectángulo o un polígono. Illustrator ajustará lo que elijamos a la forma del objeto.

La información de qué zonas tienen enlace y a dónde no se guarda en el archivo de imagen. Estos datos se introducen con la etiqueta map en el html de la página. Al Guardar para web y dispositivos, tras elegir el formato, pasamos al diálogo donde establecemos la ubicación del archivo. Ahí, en tipo podemos elegir si generamos sólo la imagen o también el una página con el código necesario para generar el mapa. Podemos copiar ése código en nuestra web.

Por ejemplo, al crear este mapa con dos áreas que enlazan a páginas distintas (los enlaces apuntan a páginas ficticias):

Hemos insertado el siguiente código fuente, generado por Illustrator:

<!-- ImageReady Slices (MapasdeImagen) -->
<img src="graficos/solyluna.gif" width="177" height="128" border="0" alt="" usemap="#solyluna_Map">
<map name="solyluna_Map">
<area shape="rect" alt="" coords="28,7,87,116" href="http://www.aulaclic.es/sol.htm">
<area shape="rect" alt="" coords="96,31,139,96" href="http://www.aulaclic.es/luna.htm">
</map>
<!-- End ImageReady Slices -->

Junio-2009
Pág. 13.2

Atrás  Inicio  Adelante





.