Hvordan lage et bilde Endre på Mouse

September 9

Enten du oppretter eller tilpasse, kan mouse bilder legge teft og en "magisk" kvalitet til ditt nettsted. Legge evnen til å lage bilder endringen ved å peke på dem med datamaskinens mus ikke er for tidkrevende, men det krever litt egendefinert kode. Implementering mouse (eller velt) bilder bruker enkel HTML og Javascript-koder - som begge er universelle datakodespråk, enkel å implementere i hvilken som helst webside.

Bruksanvisning

1 Åpne HTML-siden du ønsker å legge til bildet roll (eller mouse) i, ved hjelp av en gyldig HTML eller tekst editor.

2 Lim inn følgende kode i HTML-siden (i <body> </ body> taggene på siden kode):

"<Script type =" text / javascript ">

<! -

// Distribuer dette skriptet fritt, men vennligst hold dette

// Varsel med koden.

Var rollOverArr = new Array ();

funksjon setrollover (OverImgSrc, pageImageName)

{

hvis retur (document.images!);

if (pageImageName == null)

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

rollOverArr [pageImageName] = new Object;

rollOverArr [pageImageName] .overImg = new Bilde;

rollOverArr [pageImageName] .overImg.src = OverImgSrc;

}

funksjon roll (pageImageName)

{

hvis retur (document.images!);

hvis retur (rollOverArr [pageImageName]!);

if (! rollOverArr [pageImageName] .outImg)

{

rollOverArr [pageImageName] .outImg = new Bilde;

rollOverArr [pageImageName] .outImg.src = document.images [pageImageName] .src;

}

document.images [pageImageName] .src = rollOverArr [pageImageName] .overImg.src;

}

funksjon utrulling (pageImageName)

{

hvis retur (document.images!);

hvis retur (rollOverArr [pageImageName]!);

document.images [pageImageName] .src = rollOverArr [pageImageName] .outImg.src;

}

// ->

</ SCRIPT> "

3 Last opp bildene du ønsker å bruke sammen med image roll (to påkrevd) til nettverten eller til en gratis bilde vert, for eksempel Imgur (imgur.com), Bilde Shack (imageshack.us) eller Photobucket (photobucket.com) .

4 Finne sted på siden din fil som du ønsker å ha ditt bilde roll vises og kopiere og lime inn (ved å trykke "Ctrl", "C" samtidig på tastaturet for å kopiere og "CTRL", "V" for å lime inn) den følgende kode:

"<A

HREF="TARGETLINK.html"

onMouseOver = "roll ( 'NAMEOFROLLOVER')"

onmouseout = "utrulling ( 'NAMEOFROLLOVER')"

> & Lt; IMG

SRC = "YOURFIRSTIMAGEURL"

NAME = "NAMEOFROLLOVER"

ALT = "Alternativ tekst" BORDER = 0

Height = 150 width = 150

> & Lt; / a>

<! -

setrollover ( «ROLLOVERIMAGEURL");

// ->

</ SCRIPT> "

5 Endre variablene i koden som passer dine bilder og linker.

6 Erstatt "TARGETLINK.html" med nettsiden eller siden roll bildet vil lenke til. Gi roll bildet et bestemt navn og erstatte "NAMEOFROLLOVER" med navnet du velger. Erstatt "YOURFIRSTIMAGEURL" med bildenettadressen til bildet du ønsker synlig før musen rollover. Change "ROLLOVERIMAGEURL" til bildet etter en mus svever bildet. Rediger høyden og bredden på bildet ved å endre "150" til riktig antall piksler bildet ditt er.

7 Lagre HTML-siden og re-laste den opp til nettstedets server.

Hint

Besøk gratis HTML tutorial nettsteder på nettet for å lære flere HTML triks for bilde velt, knapper og hyperlenker. Noen kjente nettsteder som W3 Schools (w3schools.org) Echo Echo (echoecho.com), og kvakksalver It (quackit.com) omfatter store kataloger av ulike typer Internett programmering tutorials.