Hvordan endre bildestørrelse Med onmouseover

April 12

Når du kjører en nettside, har du full kontroll over layout, inkludert fargevalget, hvor du vil plassere tekst og bilder, og hvor stort å gjøre skriften og bilder. Hvis du har et galleri med bilder, kan det være fordelaktig for deg å bruke Javascript for å lage et bilde større eller mindre når du plasserer musepekeren over det med onMouseOver alternativet. Du kan også bruke onMouseOver muligheten til å vise et annet bilde når du plasserer musepekeren over et bilde for ekstra oppmerksomhet.

Bruksanvisning

1 Åpne HTML-dokumentet du vil bruke onMouseOver effekt på i en vanlig tekstredigeringsprogram, for eksempel Notisblokk.

2 Lim inn følgende kode mellom "<HEAD>" og "</ HEAD>" tags:

<! - Hide script fra gamle nettlesere

// Oppdage nettleser:

browserName = navigator.appName;

browserVer = parseInt (navigator.appVersion);

if (browserName == "Netscape" && browserVer> = 3) browserVer = "1";

else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";

annet browserVer = "2";

// Preload bilder:

if (browserVer == 1) {

a1 = new Image (107,36);

a1.src = "a1.jpg";

a2 = new Image (107,36);

a2.src = "a2.jpg";

}

// Bilde swapping funksjon:

fungere hilite (imgDocID, imgObjName, kommentar) {

if (browserVer == 1) {

document.images [imgDocID] .src = eval (imgObjName + ".src");

window.status = kommentar; return true;

}}

// End gjemme ->

</ Script>

3 Finn linjene med følgende:

"A1 = new Image (107,36)

a1.src = "a1.jpg";

"A1" er navnet på det nye bildet, mens "nytt bilde" er din beskrivelse. Den "107,36" definerer bredden og høyden av bildet. Oppgi kilde til originalbildet i den andre linjen. Plasser den fullstendige banen bildet i anførselstegn, inkludert mappen det er i og forlengelse.

4 Redigere følgende to linjer i koden din:

a2 = new Image (107,36);

a2.src = "a2.jpg";

Skriv inn navnet på den nye image for "a2", og identifisere de dimensjonene du vil bruke for bildet når du plasserer musepekeren over den. Siden du ønsker å bruke det samme bildet for begge, men ønsker å øke størrelsen på mouse, bruker den samme banen som du brukte for "a1", men endre pikselstørrelser på riktig måte.

5 Plasser følgende kode i "<BODY>" delen av HTML-dokument:

Skriv inn plasseringen av bildet i den delen av koden "tag. Den" onmouseout "funksjon går tilbake bildet tilbake til sin opprinnelige størrelse når du beveger musen av bildet. Erstatt alle forekomster av" a1 "eller" A2 "med bildefil navn.