Hoe om te vergroten een miniatuur in de HTML-Code

Een van de geheimen aan het vergroten van afbeeldingen zonder deze te vervormen is het gebruik van proportionele vergroten/verkleinen, of het verhogen van de horizontale en verticale afmetingen van een afbeelding met de hetzelfde percentage factor. Miniaturen, die kleine versies van grotere afbeeldingen, kunnen u vele afbeeldingen op een webpagina plaatsen, en gebruikers kunnen vervolgens grotere versies van die beelden bekijken door te klikken op een knop of het bedrijf hun cursors over de miniaturen. Één manier om hoge kwaliteit vergrotingen weer te geven is het gebruik van dezelfde afbeelding voor uw foto en de uitgebreide versie. Maak deze zoom-effect met behulp van een eenvoudige JavaScript truc.

Instructies

1

Start uw HTML-editor en open een HTML-document.

2

Voeg de volgende code toe aan het document:

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

onmouseover = "Grootte (, ' over')" onmouseout = "Grootte (, ' out')" / >

Dit plaatst een afbeelding op de webpagina. Merk op dat de waarden voor "hoogte" en "breedte" de afmetingen van de afbeelding in pixels bepalen. Het instellen van deze waarden het gewenste thumbnail formaat. Bijvoorbeeld, als u uw foto 80 pixels hoog en 90 pixels breed wilt, stelt te "80" de hoogte en de breedte "90." Merk op dat de "onmouseover" en "onmouseout" eigenschappen zowel van de afbeelding "id" waarde doorgeven aan een javascriptfunctie met de naam "Grootte."

3

Deze JavaScript-code toevoegen aan uw document "script" sectie:

var percentIncrease = 1.6;

De "percentIncrease" variabele bepaalt de vergrotingsfactor van de afbeelding. In dit voorbeeld, die factor is 1.6, en zorgt ervoor dat de miniatuurgrootte toe 1,6 maal. Wijzigt u die waarde aan alles wat die je wilt.

4

Plaats de volgende code onder de vorige instructie:

functie grootte (image, actie) {}

Als (actie == "over") {}

var newHeight = Math.round(image.height * percentIncrease);

var newWidth = Math.round(image.width * percentIncrease);

}

anders {}

var newHeight = Math.round(image.height / percentIncrease);

var newWidth = Math.round(image.width / percentIncrease);

}

image.style.Height = newHeight;

image.style.width = newWidth;

}

Deze "Grootte" functie bepaalt de afmetingen van de afbeelding en ze wordt vermenigvuldigd met de factor van de "percentIncrease" wanneer een muiscursor over de miniatuur beweegt. Het vermindert die dimensies wanneer de cursor uit de buurt van de afbeelding beweegt.

5

Sla het document op en open het in uw browser om de miniaturen weer te geven.

6

Beweeg uw cursor over de foto. De miniatuurgrootte verhoogt door de factor die u in de code instelt. Verplaats de muis weg van het vergrote beeld om het terug naar normale grootte.

Tips & waarschuwingen

  • Merk op dat de JavaScript-functie kunt u gebruiken van fractionele zoom factoren zoals 1.6 en 2.7. Bij het kiezen van een zoomfactor, selecteer een die het vergrote beeld niet zo groot maakt dat het niet op de pagina past. Als dat gebeurt, zal gebruikers niet zitten kundig voor hun cursors uit de buurt van de afbeelding terug naar haar normale thumbnail grootte te verplaatsen.