Eventos onMouseOvers

En este ejemplo veremos el uso del los evento onMouseOver y onMouseOut para cambiar una o mas imagenen al paso del puntero del ratón sobre una de ellas. Este método es muy usado para confirmar que cierta imagen es un enlace.

Con el código a continuación creamos las funciones necesarias que luego serán llamadas desde nuestra pagina Web. Este código lo debes poner en el HEAD

<Script>
// Funciones para un solo cambio de imagen
function sobre1(img,ref) {
   document.images[img].src=ref 
};
function fuera1(img,ref) {
   document.images[img].src=ref 
};
            
// Funciones para multiples cambios de imagen
function sobre2(img1,ref1,img2,ref2) {
   document.images[img1].src=ref1; 
   document.images[img2].src=ref2 
};
function fuera2(img1,ref1,img2,ref2) {
   document.images[img1].src=ref1; 
   document.images[img2].src=ref2 
};
</Script>

Una vez puesto el cogido anterior en la cabecera del documento HTML, entre los comandos </TITLE> y </HEAD> ahora ponemos el siguiente código dentro del cuerpo del documentos <BODY> en el lugar que queremos poner la imagen.

Solo tienes que poner tus propios datos en las zonas marcadas con verde.

Ejemplo 1

Un solo cambio en la misma imagen.

<A HREF=pagina.htm
onMouseOver="sobre1('imagenA','imagen2.gif');"
onMouseOut="fuera1('imagenA','imagen1.gif');">
<IMG SRC=imagen1.gif NAME=imagenA</A>


Manual de JavaScript

imagenA1: es el nombre que estoy asignando a este botón, de esta manera cuando pases el puntero del ratón sobre la imagen, la función sustituye a esta imagen según los datos puestos.

Ejemplo 2:

Un solo cambio en otra imagen.

<A HREF=pagina.htm
onMouseOver="sobre1('imagenB','imagen3.JPG');"
onMouseOut="fuera1('imagenB','imagen2.JPG');">
<IMG SRC=imagen1.JPG NAME=imagenA></A>
<IMG SRC=imagen2.JPG NAME=imagenB>


Manual de JavaScript

imagenB2: es el nombre que estoy asignando a este botón, de esta manera cuando pases el puntero del ratón sobre la imagen, la función sustituye a esta imagen según los datos puestos.

Ejemplo 3:

Múltiples cambio de imagen.

<A HREF=pagina.htm
onMouseOver="sobre2('imagenA','imagen2.gif','imagenB','imagen4.gif');"
onMouseOut="fuera2('imagenA','image1.gif','imagenB','imagen2.gif');">
<IMG SRC=imagen1.gif NAME=imagenA</A>
<IMG SRC=imagen3.gif NAME=imagenB</A>



Manual de JavaScript

Es muy importante que recuerdes que cada imagen del documento deberá tener un nombre único, dado vía el parámetro NAME, o el efecto onMouseOver no funcionara.