Hvordan endre et bilde på en mus Over i HTML

Hvordan endre et bilde på en mus Over i HTML


Nettstedet knapper som inneholder bilder som endres på mouse gi de besøkende med en mer dynamisk opplevelse. De har også sende en subtil instruksjon til å klikke på knappen. Velg din normale funksjonsknapp og den som vises når en bruker ruller over knappen. Bruk HTML og Javascript for å oppnå dette nyttig tillegg til websiden.

Bruksanvisning

1 Åpne en tekst eller HTML-editor og sett inn følgende:

<Script type = "text / javascript">

<! -

Var roArray = new Array ();

funksjon setrollover (OverImg, docImgName)

{

hvis retur (document.images!);

if (docImgName == null)

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

roArray [docImgName] = new Object;

roArray [docImgName] .overImage = new Bilde;

roArray [docImgName] .overImage.src = OverImg;

}

funksjon roll (docImgName)

{

hvis retur (document.images!);

hvis retur (roArray [docImgName]!);

if (! roArray [docImgName] .outImage)

{

roArray [docImgName] .outImage = new Bilde;

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

}

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

}

funksjon utrulling (docImgName)

{

hvis retur (document.images!);

hvis retur (roArray [docImgName]!);

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

}

// ->

</ SCRIPT>

2 Finn området til knappen og sett inn følgende:

<A

HREF="mydoc.html"

onMouseOver = "roll ( 'myimage')"

onmouseout = "utrulling ( 'myimage')"

> & Lt; IMG

SRC = "mainbutton.jpg"

NAME = "myimage"

ALT = "Home Page" BORDER = 0

Height = 130 width = 115

> & Lt; / a>

<Script type = "text / javascript">

<! -

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

// ->

</ SCRIPT>

Erstatt "mydoc.html" med filnavnet. Erstatt "mainbutton.jpg" og "overbutton.jpg" med bilde navnene på dine viktigste og mouse knapper hhv.

3 Lagre filen. Sørg for at bildene finnes i samme katalog som HTML-dokumentet eller på banen gitt i din "SRC" og "setrollover" attributter. Test ved å dobbeltklikke på filen på systemet.