La primera es que el código script que se ejecute para cambiar la imagen empezará a ejecutarse cuando se produzca el evento onMouseOver sobre el enlace. Este evento llamará a una función que podemos llamar cambiar.
No se nos debe de olvidar que cuando el usuario abandone el enlace debemos de volver a poner la imagen original. Para ello debemos de capturar el evento onMouseOut que lanzará otra función que llamaremos volver.
Con respecto a las funciones script debemos de tener en cuenta como se llama la imagen del documento. Para ello daremos un nombre a la imagen a través de su parámetro name.
<img src="imagen.jpg" name="miimagen">
Como conocemos el nombre de la imagen valdrá con modificar su parámetro src que indica el origen de la imagen.
miimagen.src = "nuevaimagen.jpg"
Cuando entremos en el enlace se cargará una foto y cuando salgamos, otro.
<HTML>
<HEAD>
<TITLE>Imágen Cambiante</TITLE>
<SCRIPT>
function cambiar () {
document.images["matrix"].src = "mt07.jpg";
}
function volver () {
matrix.src = "mt05.jpg";
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onMouseOver="cambiar();" onMouseOut="volver();"> Al pasar sobre mi cambiará la imagen</A> <BR><BR><BR> <IMG src="mt05.jpg" NAME="matrix">
</BODY>
</HTML>
Usuarios que han visto este tema también han visto...
- Calendario en JavaScript
- Eventos de JavaScript
- Deshabilitar minimizar en JavaScript
- Tabla de colores con Javascript
- Cabecera siempre visible con Javascript DHTML
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2011 Factoría de Internet S.L.. Todos los derechos reservados.