Cómo cambiar una imagen en un largo ratón en HTML

botones de sitio web que contienen imágenes que cambian al pasar el ratón proporcionan a sus visitantes con una experiencia más dinámica. También envían una instrucción sutil para hacer clic en el botón. Elija el botón de estado normal y el que va a mostrar cuando un usuario pasa por encima del botón. El uso de HTML y JavaScript para lograr esto adición útil a su página Web.

Instrucciones

1 Abra un editor de texto o HTML e insertar el siguiente:

<Script type = "text / javascript">

<! -

var roArray = new Array ();

función setrollover (overimg, docImgName)

{

si el retorno (document.images!);

si (docImgName == null)

docImgName = document.images[document.images.length-1].name;

roArray [docImgName] = new Object;

roArray [docImgName] = .overImage nueva imagen;

roArray [docImgName] = .overImage.src overimg;

}

la función de vuelco (docImgName)

{

si el retorno (document.images!);

si el retorno (roArray [docImgName]!);

if (! roArray [docImgName] .outImage)

{

roArray [docImgName] = .outImage nueva imagen;

roArray [docImgName] = .outImage.src document.images [docImgName] .src;

}

document.images [docImgName] = .src roArray [docImgName] .overImage.src;

}

la función despliegue (docImgName)

{

si el retorno (document.images!);

si el retorno (roArray [docImgName]!);

document.images [docImgName] = .src roArray [docImgName] .outImage.src;

}

// ->

</ Script>

2 Localizar la zona para su botón e insertar el siguiente:

<A

HREF="mydoc.html"

onMouseOver = "rollover ( 'myimage')"

onMouseOut = "despliegue ( 'myimage')"

> & Lt; IMG

SRC = "mainbutton.jpg"

NAME = "myimage"

ALT = "Página" BORDER = 0

ALTURA ANCHO = 130 = 115

> & Lt; / a>

<Script type = "text / javascript">

<! -

setrollover ( "overbutton.jpg", "myimage");

// ->

</ Script>

Reemplazar "mydoc.html" con su nombre de archivo. Reemplazar "mainbutton.jpg" y "overbutton.jpg" con los nombres de las imágenes de sus principales y mouseover botones respectivamente.

3 Guarde el archivo. Garantizar que existan las imágenes en el mismo directorio que el documento HTML o en la ruta dada en su "SRC" y "setrollover" atributos. Prueba haciendo doble clic sobre el archivo en su sistema.