Algo sobre rollovers

Un rollover es un efecto simple que se utiliza en muchísimas páginas web y que consiste en cambiar, de manera dinámica (sin recargar la página) alguna propiedad de un elemento HTML.

Por lo general, es algo que vemos en los enlaces y que podemos controlar con propiedades CSS que todos los navegadores reconocen; por ejemplo:

a {color: #CCCCFF; font-weight: normal;}
a:hover {color: #FF6666; font-weight: bold;}

Esto, hará que LOS ENLACES se muestren de cierto color y cuando coloquemos el puntero del ratón encima, cambien de color y la fuente sea negrita; volviendo a su estado "normal" en cuanto ubicamos el puntero en otro lado.

Como los enlaces, pueden ser tanto textos como imágenes, podemos usar la misma técnica para hacer un rollover sobre un enlace que sólo sea una imagen, ya sea cambiando su transparencia, agregándole un borde o cambiando la imagen:

	a.demoArollOver21 {background: transparent url(URL_imagen) no-repeat left 50%; display: block; height: 32px; width: 32px; padding: 2px 0;} a.demoArollOver21:hover {background-color: #DC143C; border: 2px solid #A52A2A; padding:0;}
	a.demoArollOver22 {background: transparent url(URL_imagen) no-repeat left 50%; display: block; width: 32px; height: 32px;} a.demoArollOver22:hover {filter: alpha(opacity=80); opacity: 0.80;}
	a.demoArollOver23 {background: transparent url(URL_primeraImagen) no-repeat left 50%; display: block; width: 32px; height: 32px;} a.demoArollOver23:hover {background: transparent url(URL_segundaImagen) no-repeat left 50%;}

En resumen, lo que hacemos es darle a un enlace dos tipos de propiedades; una "normal" y otra que usaremos cuando el puntero del ratón esté encima.

Esos cambios pueden ser tan sencillos como modificar el color o tan complejos como se nos ocurra:

OTROS ENLACES

Usar el opcode :hover es lo más sencillo pero tiene una limitación, en algunos navegadores como Internet Explorer sólo funciona con los enlaces así que si queremos utilizarlos en otro tipo de etiquetas, debemos recurrir a alguna clase de truco y allí entra a jugar el JavaScript.

Todas las etiquetas admiten uno o varios atributos:

<ETIQUETA atributo="valor"> el contenido </ETIQUETA>

Entre esos atributos están los llamados eventos y algunos de ellos se corresponden con esto de los rollovers; específicamente hay dos: onmouseover y onmouseout. El primero detecta cuando el puntero del ratón está sobre una etiqueta y el segundo cuando sacamos el puntero. Sabiendo esto, podríamos escribir una etiqueta como IMG y hacer que cambiara:

<ETIQUETA onmouseover="... hacer algo ..." onmouseout="... hacer algo ..."> el contenido </ETIQUETA>

Ese "hacer algo" debe ser código JavaScript y, aunque parece magia negra, en realidad, podemos crear algunas cosas de manera sencilla. Un ejemplo fácil de comprender es la etiqueta IMG:

<img src="URL_laImagen" />

Con JavaScript podemos "leer" el valor del atributo src usando la palabra this que es la referencia al objeto (en este caso la etiqueta) así que:

this.src es la dirección de esa imagen (URL_laImagen)

Por lo tanto, como sabemos cuál es, la podemos modificar cuando colocamos el puntero del ratón encima:

<img src="URL_primeraImagen" onmouseover="this.src = 'URL_segundaImagen';" />

Claro que, como la cambiamos, si queremos volver atrás y resturar la imagen original cuando quitemos el puntero, habrá que hacer lo inverso:

<img src="URL_laImagen" onmouseover="this.src = 'URL_segundaImagen';" onmouseout="this.src = 'URL_primeraImagen';" />

En resumen, en una imagen IMG:

el atributo src = "URL_primeraImagen" es la imagen visible, la primera que vemos
el atributo onmouseover="this.src = 'URL_segundaImagen';" es la imagen que cambiamos
el atributo onmouseout="this.src = 'URL_primeraImagen';" es la imagen original que restauramos

Pero JavaScript nos permite hacer algo más. Si identificamos una etiqueta con el atributo ID y le damos un nombre único, en lugar de la palabra this, podemos usar una función interna llamada getElementById() para modificar otra etiqueta.

getElementById('elNombre').src es la dirección de la imagen en una etiqueta con el atributo ID ='elNombre'

Un ejemplo sencillo. Tenemos dos imágenes, la de la izquierda tendrá los eventos que cambiará la de la derecha a la que habremos dado un nombre para reconocerla:

La imagen de la izquierda:

<img src="URL_primeraImagen" onmouseover="getElementById('elNombre').src='URL_segundaImagen';" onmouseout="getElementById('elNombre').src='URL_primeraImagen';"/>

La imagen de la derecha:

<img id="elNombre" src="URL_primeraImagen"/>

Compliquemos un poco el asunto.

Imaginemos que tenemos una serie de pseudo-enlaces de texto y usando el evento onmouseover, cambiamos la imagen de una etiqueta IMG de tal manera que en un pequeño sector, podemos mostrar una serie de imágenes diferentes.

Cada pseudo-enlace lo colocaremos en una celda de una tabla así que tendrá un código como este:

<td onmouseover="getElementById('rollOverImgs').src='URL_imagenXXX';">TEXTO</td>

Y la imagen en si misma, estará en cualquier otro lado, dentro de la tabla o fuera de ella, y tendrá un código similar a este:

<img id="rollOverImgs" src="URL_imagenInicial" />

A	B	F	I	J	N	O	P	V	X