ubiquitour.com

Cómo cambiar una imagen con el ratón sobre en HTML

Cómo cambiar una imagen con el ratón sobre en HTML

Botones web que contengan imágenes que cambian en mouseover que sus visitantes con una experiencia más dinámica. También envían una instrucción sutil hacer clic en el botón. Elija el botón de estado normal y el que se mostrará cuando un usuario vuelca el botón. Utilizar HTML y JavaScript para realizar esta adición útil a su Web page.

Instrucciones

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

< SCRIPT tipo = "texto/javascript" >

<!--

var roArray = new Array();

función setrollover(OverImg,docImgName)

{

Si (! document.images)return;

Si (docImgName == null)

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

roArray [docImgName] = nuevo objeto;

roArray [docImgName] .overImage = nueva imagen;

roArray [docImgName].overImage.src = OverImg;

}

función rollover(docImgName)

{

Si (! document.images)return;

Si (! roArray [docImgName]) volver;

Si (! roArray[docImgName].outImage)

{

roArray[docImgName].outImage = new Image;

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

}

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

}

función rollout(docImgName)

{

Si (! document.images)return;

Si (! roArray [docImgName]) volver;

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

}

-->

< /script >

2 Localizar el área para el botón e inserte lo siguiente:

< A

HREF="mydoc.html"

onMouseOver = "rollover('myimage')"

onMouseOut = "rollout('myimage')"

>&lt;IMG

SRC="mainbutton.jpg"

NAME="myimage"

ALT="Home Page" BORDER=0

HEIGHT=130 WIDTH=115

>&lt;/A>

< SCRIPT tipo = "texto/javascript" >

<!--

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

-->

< /script >

Reemplace "mydoc.html" con el nombre del archivo. Reemplace "mainbutton.jpg" y "overbutton.jpg" con el nombre de las imágenes de los botones principal y mouseover respectivamente.

3 Guarde el archivo. Asegúrese de que las imágenes existen en el mismo directorio como documento HTML o en el camino en tus atributos "Fuente" y "setrollover". Prueba haciendo doble clic en el archivo en su sistema.