The All-Knowing 4: Tutorial: Mapa de imagen + mouseover por área para nuestro logo

Este es un tutorial de algo que hace poco hice en el blog y sé que solo por el título ya puede parecer complicado pero la verdad una vez que entiendas un poco de HTML y Javascript, entenderás bien cómo fue creado el código. Pero antes que nada, explicaré qué es lo que vamos a hacer.

El objetivo.

Este blog como ya sabrán cuenta de 4 autores, por eso a la derecha, en el sidebar, pueden ver los 4 avatares de cada autor agrupados en una sola imagen. Sin embargo, ahora quería que cuando le hagan click a cada uno de los avatares, a pesar de ser una sola imagen, te lleve a todos los posts únicamente de ese autor al que le dieron click (esta parte es fácil pues cada autor le pone una etiqueta a todas sus entradas con su nombre). Pero además de convertir una imagen sin link en una imagen con 4 links, lo que quería era que cuando pasaran el mouse sobre el avatar de alguno, se vea alguna animación para hacer más evidente que cada avatar es un link que te llevará a los posts del autor seleccionado.

Para lograr lo primero, vamos a hacer un “mapa de imagen” (mejor conocido como “image map”) y para lograr lo segundo, haremos uso de un simple (aunque para el caso y para mi nivel, algo complicado) efecto mouseover.

1era parte: El image map.

Tengo que decir que para todo este mini-proyecto mío, tuve que investigar bastante y la página que me ayudo para hacer el mapa de imagen (y que por cierto me ha ayudado muchas otras veces en el pasado) fue Vagabundia y su tutorial HTML. Les recomiendo que lean bien esa parte de su tutorial para que entiendan mejor lo que vendrá después

En el tutorial de Vagabundia sobre mapas de imágenes, ella dice que podemos crear un mapa con la etiqueta <Map> que a la vez contendrá varias áreas o "hotspots" que son los lugares de la imagen que tendrán algún link. Las áreas se darán con la etiqueta <area>. Para definir un área dentro de un mapa, tienes que definir primero la forma del área y después las coordenadas de cada área. Las formas de un área pueden ser:

Código HTML:	Se usa para formas:	Se necesita especificar:
rect	rectangulares	Las coordenadas del punto izquierdo superior y las coordenadas del punto derecho inferior.
circle	circulares	Las coordenadas del centro y el radio.
poly	irregulares (polinomios)	Las coordenadas de los puntos del polinomio en orden.

Para hallar las coordenadas en una imagen, se puede usar cualquier programa de edición de imágenes como Paint o Photoshop. Las coordenadas se escriben así: x,y; es decir, primero el eje x (horizontal) y después el eje y (vertical).

En Vagabundia nos presentan ya la forma completa del código del mapa:

<MAP NAME="nombremapa"> <AREA SHAPE="RECT" COORDS="a1,b1,c1,d1" HREF="URLdestino1"> <AREA SHAPE="RECT" COORDS="a2,b2,c2,d2" HREF="URLdestino2"> <AREA SHAPE="DEFAULT" NOHREF> </MAP> <IMG SRC="URL_imagen" USEMAP="#nombremapa" WIDTH="ancho" height="alto">

Nótese que después de haber declarado el mapa y sus áreas, se declara la imagen, su ancho y alto y además el nombre del mapa que la imagen va a usar o sea que desde ya podemos saber que es posible tener varios mapas y asignarlos a diferentes imágenes de ser necesario.

Para mi propósito de “mapear” el logo del blog, usé este código:

Yo a cada área le agregué el tag <title> para que al pasar el mouse por ese "link" o "hotspot", se mostrara debajo la descripción del link (en este caso “Autor: LKaiser”, “Autor: Gothsmoke”, etc.).

Con esto, ya tenemos completo la primera parte del objetivo que fijamos al comienzo, ya convertimos una imagen sin ningún link a nada, en la misma imagen pero con 4 links divididos según el avatar de cada autor y definido gracias a las coordenadas de cada área.

2da parte: El mouseover.

Lo que se pretende hacer con el mouseover es lograr cambiar el logo de la imagen cuando se pase el mouse sobre los diferentes avatares, es decir que hay 4 imágenes más a parte del que ven y cada imagen se verá solo cuando pases el mouse sobre el área o avatar correcto. Estas son las imágenes que cree con Photoshop:

Para esta segunda parte seguí el tutorial de Kevin Yank. Su tutorial está dividido en varias partes, nuevamente recomiendo leerlo todo pero yo al final más que nada use la 2da y la 3ra parte de su tutorial. En la 2da parte de su tutorial, Yank nos demuestra una forma simple de hacer un mouseover usando Javascript:

function activate() { document.images["my1stMouseOver"].src = "on.gif"; } function deactivate() { document.images["my1stMouseOver"].src = "off.gif"; } <A HREF="javascript:void(0)" onMouseOver="activate()" onMouseOut="deactivate()"><IMG SRC="off.gif" WIDTH="70" HEIGHT="30" BORDER="0" NAME="my1stMouseOver"></A>

Analicemos un poco este código: tenemos dos partes, la primera son las funciones, que al ser “llamadas por su nombre” (en este caso “activate()” y “deactivate()”), efectuarán lo que sea que esté entre corchetes. Los que esta en los corchetes en este caso es simplemente la imagen a mostrar en cada caso, en el primer caso la imagen a mostrar es la imagen que se mostrará cuando se pase el mouse y la segunda, cuando el mouse no este encima.

En la segunda parte del código tenemos un “link” (<a href="[...]">) pero este link no te lleva a otra pagina es más bien una forma de poder agregarle los "disparadores" que harán funcionar las funciones. Los disparadores son "onMouseOver" y "onMouseOut". OnMouseOver es un script de Javascript que se "activa" o funciona, cuando el mouse está sobre el elemento al que se asignó y onMouseOut es el script que funciona mientras el mouse no esté sobre el elemento asignado.

En este caso, mientras el mouse esté encima de la imagen disparará, como pueden ver en el código, la función "activate" que era justamente la función que cambiaba la imagen original a la cambiada. Después de esa parte esta simplemente el tag <img> que pondrá la imagen a la que le está afectando el “link” que contiene los disparadores y por ende, las funciones pero esta imagen tiene algo interesante: que tiene una función clave para que todo funcione bien: el tag <name>, que es un código bastante conocido y bastante usado pero que en este caso tiene que necesariamente coincidir con el nombre de la imagen que esta dentro de las funciones.

Muy bien, ahora Yank en la 3ra parte de su tutorial nos dice que si queremos hacer varias imágenes con mouseovers, no es necesario copiar las funciones una y otra vez sino simplemente usar el código modificado que él nos da. Y aquí es donde tuve un problema, en su código modificado para múltiples mouseovers (como lo que yo quería lograr), las variables que indican qué imagen cambia por cuál eran para cada imagen. Es decir una imagen tenia 2 variables (la imagen normal y la cambiada) y así puedes tener la misma y única función pero con diferentes variables. Ahora, yo solo tengo una imagen y no logré asignarle todas las variables pues cada variables funciona con el nombre de la imagen y como una imagen no puede tener más de un nombre, tuve que al final simplemente repetir la función 4 veces, una para cada avatar.

El código completo, “fusionando” el código de image map de Vagabundia con el código de mouseover de Kevin Yank, terminó así:

<img src="http://[…]avatar_all3.png" width="245" height="245" border="0" name="my1stMouseOver" usemap="#Los Culpables" />

Nótese que al final, el nombre de la imagen para el mouseover no va en cada área porque al tag <area> no le puedes asignar un nombre, sólo a la imagen que es la base de todo: del mouseover y del mapa. Ese código produce esto:

3ra parte: Precargar las imágenes.

~~Como habrán podido notar~~ Quizás no lo habrán podido notar porque ya esta arreglado, pero si dejaba el código como estaba, las imágenes cargaban muy lento pues recién comienzan a cargar cuando pasas el mouse encima. Así que lo que ahora tenemos que hacer es hallar la forma de que carguen las imágenes junto con el blog completo. Esto es algo muy común en javascript y será bien fácil de hacer. Este tutorial te da ya un código que puedes usar para precargar las imágenes:

<SCRIPT language="JavaScript">  </SCRIPT>

La primera línea de cada imagen que va a ser precargada define un nuevo objeto que será una imagen con el ancho y alto que está entre paréntesis. La segunda línea es la URL de esas imágenes. Este código debe ser puesto primero, después van las funciones y finalmente el imagemap y todo el código completo en un widget de HTML/Javascript de Blogger.

The All-Knowing 4

Tutorial: Mapa de imagen + mouseover por área para nuestro logo

El objetivo.

1era parte: El image map.

2da parte: El mouseover.

3ra parte: Precargar las imágenes.

Los Culpables

Sobre Nosotros Cuatro

Contáctanos

Primer CD de Nicole Pillman

Entradas más populares

Etiquetas