Hvordan å forstørre et miniatyrbilde i HTML-koden

En av hemmelighetene til å forstørre bilder uten å forvrenge dem er å bruke proporsjonal endring av størrelse, eller øke en bildets horisontale og vertikale dimensjoner med samme prosent faktor. Miniatyrbilder, som er små versjoner av større bilder, kan du plassere mange bilder på en webside, og brukere kan deretter se større versjoner av disse bildene ved å klikke på en knapp eller holde sine pekere over miniatyrbilder. En måte å vise høykvalitets forstørrede bilder er å bruke samme bilde for bilde og forstørret versjon. Lag denne zoomeffekten ved hjelp av en enkel Javascript triks.

Bruksanvisning

1 Start din HTML editor og åpne et HTML-dokument.

2 Legg til følgende kode i dokumentet:

<Img id = "Image1" height = "100" width = "100"

onmouseover = "SetSize (dette," over ")" onmouseout = "SetSize (dette," ut ")" />

Dette legger et bilde på websiden. Merk at verdiene for "height" og "width" bestemme bildets dimensjoner i piksler. Sett disse verdiene til ønsket miniatyrstørrelse. For eksempel, hvis du ønsker thumbnail skal være 80 piksler høye og 90 piksler bred, angir høyde til "80" og bredden til "90." Merk at "onmouseover" og "onmouseout" egenskaper både pass bildets "id" verdi til en Javascript-funksjon som heter "SetSize."

3 Legg denne Javascript-kode for å dokumentets "script" -delen:

Var PercentIncrease = 1,6;

Den "PercentIncrease" variabelen bestemmer bildets forstørrelsesfaktoren. I dette eksemplet er det faktor 1,6, og fører til at miniatyr størrelse for å øke 1,6 ganger. Endre denne verdien til noe du liker.

4 Plasser følgende kode under den forrige setningen:

funksjon SetSize (image, handling) {

if (handling == "over") {

Var newHeight = Math.round (image.height * PercentIncrease);

Var newWidth = Math.round (image.width * PercentIncrease);

}

else {

Var newHeight = Math.round (image.height / PercentIncrease);

Var newWidth = Math.round (image.width / PercentIncrease);

}

image.style.height = newHeight;

image.style.width = newWidth;

}

Denne "SetSize" -funksjonen bestemmer dimensjonene på bildet og multipliserer dem av "PercentIncrease" faktor når en musepekeren beveger seg over miniatyrbildet. Det reduserer disse dimensjonene når markøren flyttes vekk fra bildet.

5 Lagre dokumentet og åpne den i nettleseren din for å se miniatyrbilde.

6 Flytt markøren over miniatyrbildet. Den miniatyr størrelse øker med faktoren du setter i koden. Flytt musen bort fra det forstørrede bildet for å gå tilbake til normal størrelse.

Hint

• Legg merke til at Javascript-funksjonen lar deg bruke brøk zoom faktorer som 1.6 og 2.7. Når du velger en zoomfaktor, velg en som ikke gjør det forstørrede bildet så stort at det ikke passer på siden. Hvis det skjer, vil brukere ikke kunne flytte sine pekere vekk fra bildet for å gå tilbake til sin normale miniatyrstørrelse.