1 .
Una sóla imagen
2 .
Varias imágenes
Si quieres hacer un índice cuyos elementos
se iluminen si pasas el ratón por encima suyo,
en esta página te enseñaremos cómo. Funciona con todos
los navegadores capaces de reproducir este efecto (Netscape 3, Explorer 4 y superiores).
Una sóla imagen
Al pasar el ratón por encima
de la imagen que tienes aquí debajo, podrás observar que el
gráfico cambia.
Para hacer esto deberemos crear dos gráficos
distintos: el que se verá normalmente y el que únicamente
podrá verse cuando el ratón pase por encima. Si llamamos
al primero, por ejemplo, apagado.gif y al
segundo encendido.gif
el código necesario para que el truco funcione es:
<HTML>
<HEAD>
<TITLE>Ejemplo de imagenes</TITLE>
<SCRIPT LANGUAGE="JavaScript">
if (document.images) {
var activado=new Image();
activado.src="encendido.gif";
var desactivado= new Image();
desactivado.src="apagado.gif";
}
function activar(nombreImagen) {
if (document.images) {
document[nombreImagen].src=activado.src; }
}
function desactivar(nombreImagen) {
if (document.images) {
document[nombreImagen].src=desactivado.src; }
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="mipagina.html"
onMouseOver="activar('prueba');"
onMouseOut="desactivar('prueba');">
<IMG NAME="prueba" SRC="apagado.gif" BORDER=0></A>
</BODY>
</HTML>
Lo primero que hay que indicar es que para que funcione el invento
la imagen debe ser un enlace. ¿Por qué? Porque los eventos que
controlan si el ratón pasa o no por encima no son admitidos por la
etiqueta <IMG>. También deberemos
"bautizar" nuestra imagen usando el atributo
NAME="como-se-llame"
para permitir al código su identificación posterior.
El ejemplo funciona de la siguiente
manera: en principio la imagen que vemos es la desactivada, que es la que
indica la etiqueta <IMG>. Al pasar el
raton por encima de ella el evento onMouseOver
llamará a la función activar llevando como parámetro
el nombre de la imagen. Esta función sustituirá
en el objeto document el nombre del fichero donde se guarda la imagen por
encendido.gif, que es el gráfico
activado. Cuando apartemos el ratón de la imagen, será
el evento onMouseOut el que se active,
llamando a desactivar. Esta función sustituirá el gráfico
de nuevo, esta vez por apagado.gif.
Leyendo esta explicación
parece que una parte del código sobra. ¿Para qué sirve
declarar dos objetos Image para albergar los gráficos? ¿No
bastaría con cambiar directamente el nombre de la imagen escribiendo
document[nombreImagen].src = 'encendido.gif';?
Pues no del todo. Efectivamente funcionaría,
pero cada vez que cambiásemos el nombre el navegador se traería
la imagen del remoto lugar donde se encontrara. Es decir, cada vez que
pasásemos el ratón por encima de la imagen o nos alejaramos
de ella tendríamos que cargar (aunque ya lo hubiésemos hecho
antes) el gráfico correspondiente. Es cierto que con la caché del
navegador este efecto quedaría algo mitigado, pero siempre es mejor
precargar las imágenes usando el objeto Image, ya que así el
navegador comenzará a leer el gráfico en cuanto ejecute el
código en vez de esperar a que el usuario pase por encima de la
imagen con el ratón. El objeto Image tiene como atributos
los distintos parámetros que puede tener la etiqueta
<IMG>.
Por último, hay que estudiar
que significa eso de if (document.images). En
los navegadores que no poseen JavaScript 1.1 (léase Netscape 2 y
Explorer 3 e inferiores) el objeto Image no
existe y dará un mensaje si se lo encuentra por ahí. La
solución a este problema consiste en detectar la capacidad del
navegador para manipular gráficos preguntandole por la
existencia del array document.images. Así
podremos no crear las variables que guardan los gráficos ni
ejecutar el código de las funciones para activar y desactivar en
el caso de que el navegador no soporte este array, lo cual es lo mismo que
decir que soporta la versión 1.1 de JavaScript.
Varias imágenes
La cosa se complica cuando utilizamos más de
una imagen. Para simplificar el código conviene renombrar todas los gráficos
que vamos a utilizar del siguiente modo:
Todos comienzan con la misma palabra, luego su número,
y finalmente la letra a si corresponde a
un gráfico que se muestra sólo al pasar el ratón
por encima.
Lo primero que vamos a modificar del código original
es la precarga de imágenes. Lo que haremos será crear dos
arrays, uno para las imagenes originales
(desactivado) y otro para las que se iluminan
(activado). El índice de cada
array será el nombre que luego asignaremos a la
imagen en el parámetro <IMG NAME>.
if (document.images) {
var activado = new Array();
var desactivado = new Array();
for (i=0; i<=1; i++) {
activado["menu"+i] = new Image();
desactivado["menu"+i] = new Image();
activado["menu"+i].src = "menu"+i+"a.gif";
desactivado["menu"+i].src = "menu"+i+".gif";
}
}
Las funciones que modifican las imágenes no cambian
mucho. Tan sólo el lado derecho de la igualdad. Ahora el nuevo gráfico a
cargar será el correspondiente dentro de cada array.
function act(nombreImagen) {
if (document.images)
document[nombreImagen].src=activado[nombreImagen].src;
}
function desact(nombreImagen) {
if (document.images)
document[nombreImagen].src=desactivado[nombreImagen].src;
}
Por último deberemos tener cuidado con la manera
de nombrar las imágenes en el código HTML. Debemos llamarlas por el nombre
(sin el .gif) de su gráfico desactivado:
<A HREF="../recursos.htm"
onMouseOver="act('menu0');"
onMouseOut="desact('menu0');">
<IMG NAME="menu0" SRC="menu0.gif" BORDER=0></A>
De este modo lograremos un bello resultado. Este truco
es, por supuesto, extensible al número de imágenes que se necesiten, siempre
y cuando se las nombre como se ha indicado y se aumente el número que aparece como
límite en el <IMG NAME>.
Artículos
