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 raton sobre una de ellas. Este metodo es muy usado para confirmar que cierta imagen es un enlace.

Con el codigo a continuacion creamos las funciones necesarias que luego seran llamaadas desde nuestra pagina Web. Este codigo lo debes poner en el HEAD

<SCRIPT LANGUAGE=JavaScript>
<!-- esconde codigo
// 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 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 };

// fin esconde -->
</SCRIPT>

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

NOTA: 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

imagenA es el nombre que estoy asignando a este boton, de esta manera cuando pases el puntero del raton sobre la imagen, la funcion sustituye a esta imagen segun 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

Ejemplo 3:
Multiples 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

NOTA: Es muy importante que recuerdes que cada imagen del documento debera tener un nombre unico, dado via el en el parametro NAME, o el efecto onMouseOver no funcionara.