martes, 3 de febrero de 2015

Aprende acerca los de 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 CS4Ir al curso de Dreamweaver CS4Ir al curso de Illustrator CS4Ir al curso de Photoshop CS4Ir 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 -->

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

No hay comentarios:

Publicar un comentario

Entradas populares