Efecto onMouseOver

Si queremos usar los efectos de onMouseOver en una pagina, un buen método es cargar primero las imágenes que se van a mostrar con los eventos. Tenemos dos metodos para hacer esto.

NOTA: Solo tienes que sustituir las zonas verdes con el apropiado nombre de tus imágenes.

Primer método

En este caso, las imagenes se almacenan en una matriz (array).

<SCRIPT LANGUAGE=JavaScript>
<!-- esconde codigo
var lista = new Array ("unoA.gif","dosA.gif","tresA.gif","cuatroA.gif";
var imgs = new Array();
var count;
if (document.images)
for (count=0; count<lista.length; count++)
{imgs[count]=new Image(); imgs[count].src=lista[count] };

function prende1(num) {if (document.images) {document[imageName].src = eval(imgs[num] + ".src");}}
function apaga1(num) {if (document.images) {document[imageName].src = eval(imgs[num] + ".src");}}
// -->
</SCRIPT>

Ejemplo 1
<A HREF=pagina.htm
onMouseOver="prende1('imagen1')"
onMouseOut="apaga1('imagen1')">
<IMG SRC=imagen.gif NAME=imagen1></A>
Manual de JavaScript

Segundo método

En este ejempo cargaremos las imágenes en variables independientes, un juego para on y otro para off.

<SCRIPT>
<!-- esconde codigo
imagen1on = new Image(); imagen1on.src = "unoA.gif";
imagen2on = new Image(); imagen2on.src = "dosA.gif";
imagen3on = new Image(); imagen3on.src = "tresA.gif";
imagen4on = new Image(); imagen4on.src = "cuatroA.gif";
imagen1off = new Image(); imagen1off.src = "unoB.gif";
imagen2off = new Image(); imagen2off.src = "dosB.gif";
imagen3off = new Image(); imagen3off.src = "tresB.gif";
imagen4off = new Image(); imagen4off.src = "cuatroB.gif";

function prende2(imageName) {if (document.images) {document[imageName].src = eval(imageName + "on.src");}}
function apaga2(imageName) {if (document.images) {document[imageName].src = eval(imageName + "off.src");}}
// -->
</SCRIPT>

Y a continuación el código HTML que deberemos usar en nuestra página para poder llamar a la funcion.

Ejemplo 2
<A HREF=pagina.htm
onMouseOver="prende2('imagen1')"
onMouseOut="apaga2('imagen1')">
<IMG SRC=unoB.gif NAME=imagen1gt;</A>
Manual de JavaScript