Rollover múltiple en JavaScript

Vamos a crear un rollover múltiple, entendiendo por tal el formado por varias imágenes que cambian al pasar el cursor sobre ellas, y para hacer algo útil, vamos a aplicar este rollover a la construcción de un menú.

Indudablemente, podríamos basarnos en lo estudiado en el rollover simple para crear uno múltiple, pues basta establecer en los eventos de los enlaces una llamada a la propiedad src de cada imagen, o también crear 2 funciones para cada imagen y llamar a cada una de ellas en el momento oportuno.

No vamos a hacer esto, ya que repetiríamos código innecesario, pero tampoco vamos a crear unas funciones basadas en cambiar matrices de imágenes mediante bucles, porque creo que entonces no se vería claro el porqué de cada función y variable.

Por lo tanto, vamos a crear un código lo más simple y claro posible, tal que se pueda entender bien su uso, ya que el objeto de este artículo es aprender porqué se hacen las cosas, no presentar scripts muy avanzados y bonitos.

Vamos a basarnos en lo aprendido hasta ahora, llamando a una misma función en los dos eventos, función que va a admitir dos parámetros: el name de la imagen a cambiar y el nombre del objeto Image cuyo src va a ser el nuevo que asignemos.

Nuestro menú va a estar formado por 3 imágenes, cada una con un enlace, y lógicamente lo primero que debemos hacer será precargar todas ellas, tanto activas como iniciales. Vamos a ver primero el código completo necesario para el menú y su efecto, y posteriormente explicaremos el código someramente:

<html>
<head>
<title>ejemplo de rollover múltiple</title>
<script language=”JavaScript” type=”text/javascript”>

home=new Image(80,20);
homeOn=new Image(80,20);
html=new Image(80,20);
htmlOn=new Image(80,20);
java=new Image(80,20);
javaOn=new Image(80,20);

home.src=”boton1off.gif”;
homeOn.src=”boton1on.gif”;
html.src=”boton2off.gif”;
htmlOn.src=”boton2on.gif”;
java.src=”boton3off.gif”;
javaOn.src=”boton3on.gif”;

function cambia(nombre,activa)
{
document.images[nombre].src=activa.src;
}

</script>

</head>
<body>
<P>
<A href=”#” onmouseout=”cambia(‘primera’,home);” onmouseover=”cambia(‘primera’,homeOn);” onclick=”return false;”>
<img name=”primera” src=”boton1off.gif” width=”80″ height=”20″ border=”0″ alt=”home”>
</A>
<P>
<A href=”#” onmouseout=”cambia(‘segunda’,html);” onmouseover=”cambia(‘segunda’,htmlOn);” onclick=”return false;”>
<img name=”segunda” src=”boton2off.gif” width=”80″ height=”20″ border=”0″ alt=”home”>
</A>
<P>
<A href=”#” onmouseout=”cambia(‘tercera’,java);” onmouseover=”cambia(‘tercera’,javaOn);” onclick=”return false;”>
<img name=”tercera” src=”boton3off.gif” width=”80″ height=”20″ border=”0″ alt=”home”>
</A>
</P>
</body>
</html>

Como hemos dicho antes, lo primero que hacemos es precargar las seis imágenes que vamos a usar, asignando cada una de ellas a un objeto Image que creamos con el método constructor conocido: las tres iniciales (home, html y java) y las tres activas (homeOn, htmlOn y javaOn).

Seguidamente, creamos nuestra única función, cambia(nombre,activa) , que va a admitir como parámetros nombre, que es el name de la imagen del BODY que va a cambiarse, y activa, que es nombre del objeto Image cuya imagen asociada (mediante su parámetro src) es la que deseamos que aparezca mediante la función.

Con este planteamiento podemos cambiar las veces que queramos cualquier imagen de la página; basta para ello decirle a la función qué imagen debe cambiar y por cuál.

Entonces, aprovechamos los enlaces de cada una de las tres imágenes de nuestro menú para llamar a la función cambia, pasandola en cada onmouseOver el name de la imagen contenida en el enlace y el nombre del objeto Image que define la nueva imagen a aparecer, y llamando a la función de nuevo en cada evento onmouseOut para volver las cosas a su estado inicial.

En la función hemos escrito document.images[nombre].src , con el parámetro nombre entre paréntesis porque la imagen es en este caso un elemento de la matriz images, que contiene todas las imágenes del documento (también se podía haber escrito document[nombre], ya que document contiene todos los objetos predefinidos del documento, sean imágenes, enlaces o formularios), y desde el evento hemos pasado este parámetro entre comillas simples porque como atributo de un objeto hay que hacerlo así (si se la hubiésemos pasado sin comillas nos daría un error, ya que le estaríamos pasando entonces un objeto, y no un atributo, que es lo que name es en realidad).

Y desde estos eventos hemos pasado el valor del parámetro activa sin comillas porque en la escritura de la función tenemos activa.src , es decir, hace referencia a la propiedad src de un objeto Image.

Como norma general, cuando a una función de JavaScript le pasamos como parámetro un atributo (name de una imagen o enlace, id de una capa, etc.) debemos hacerlo siempre entre comillas, mientras que si le pasamos como parámetro un objeto, hay que hacerlo sin incluirlo entre ellas.

No creo que sean necesarias más explicaciones, ya que el código es bastante simple. Sólo decir que muchos autores introducen en el código inicial de la función cambia un condicionante if(document.images) , y que con ello lo que persiguen es que el código siguiente sólo se ejecute en el caso de que el navegador acepte este objeto de JavaScript. Podemos tranquilamente pasar de este condicionante, ya que la gran mayoría de los navegadores actuales soportan el objeto Image de JavaScript.

Artículo de Luciano Moreno
(Dep. Diseño Web BJS Software)

Rollover múltiple en JavaScript

Sentencias de control en JavaScript

Jerarquía de objetos en JavaScript: objeto DOCUMENT

Rollover simple en JavaScript

El objeto IMAGE en JavaScript

Las variables en JavaScript

» JavaScript