Hoe om te zoomen op een afbeelding binnen een DIV



U kunt afbeeldingen op webpagina's ingezoomd wanneer u ze geklikt gezien hebben. Presenteren een kleinere versie van een afbeelding binnen een DIV helpt element behoud van waardevolle webpagina ruimte. Bezoekers van de site kunnen vervolgens een afbeelding groter maken door het zoomen indien zij dit wensen. Door het creëren van een JavaScript-functie die kenmerk van de "src" van een afbeelding verkrijgt, kunt u gebruikers de mogelijkheid om in te zoomen een afbeelding binnen een div-element als uw Web application runs geven.

  • Open uw HTML-document met behulp van een teksteditor of Kladblok.

  • Plaats deze twee div blokkeert in de hoofdgedeelte van het document:

    Elk blok DIV bevat een afbeelding. Elke afbeelding heeft een unieke id-waarde. "Abc.jpg" en "def.jpg" vervangen door de namen van twee beelden op uw harde schijf.

  • Voeg de volgende code om de documentsectie script:

    var zoomFactor = 1.5;

    var afbeeldingen [=

    'image1',

    'image2'

    ];

    De "zoomFactor" variabele bevat de waarde die de gewenste vergrotingsfactor bepaalt. Deze waarde is 1,5. De "beelden" matrix bevat de id-waarden van de twee beelden die is gedefinieerd in de hoofdtekst van het document.

  • Plak deze functie "onload" hieronder de code in de vorige stap:

    Window.onload = functie () {}

    addClickEvents;

    }

    functie addClickEvents() {}

    voor (var ik = 0; i< images.length;="" i++)="">

    document.getElementById(images[i]).onclick = functie () {}

    zoomImage(document.getElementById(images[i]));

    var xx = 1;

    }}

    }

    Deze functie "onload" wordt uitgevoerd nadat de pagina geladen is. Het maakt gebruik van onopvallende JavaScript toe te voegen 'onclick' gebeurtenis-handlers aan de twee beelden. Plaatsen van gebeurtenis-handlers in de "onload"-functie kunt u houden van gebeurtenis-handlers uit je lichaam sectie Label verklaringen. Dit resulteert in schonere code markup. Nadat deze functie is uitgevoerd, bevat elk beeld een 'onclick'-evenement dat een functie met de naam "zoomImage roept" wanneer erop wordt geklikt.

  • Voeg de volgende "zoomImage" JavaScript-functie hieronder de code in de laatste stap:

    functie zoomImage(image) {}

    image.Height = image.height * zoomFactor;

    image.width = image.width * zoomFactor;

    }

    Deze functie wordt ingezoomd op het beeld doorgegeven aan de functie.

  • Sla het document en open het in uw browser. De twee afbeeldingen weergegeven.

  • Klik op een van de afbeeldingen. De code wordt uitgevoerd en Hiermee zoomt u het beeld door de vergrotingsfactor die u instellen bij het definiëren van de variabele "zoomFactor". In dit voorbeeld is dat vergrotingsfactor 1.5.

  • Klik op de andere afbeelding om te controleren of dat het ook zoomt wanneer erop wordt geklikt.

Tips & waarschuwingen
  • Wijzig de "zoomFactor" variabele 1.5 in alles wat die je wilt. Om de afbeelding kleiner maakt, de waarde van "zoomFactor" 0.9 of sommige andere waarde minder is dan 1.

Gerelateerde Artikelen

Hoe te het uitlijnen van een div-element op de bodem van een andere

Hoe te het uitlijnen van een div-element op de bodem van een andere

HTML-divisies zijn een grote en efficiënte vorm van opmaak om te vervangen frames en tabellen. Plaatst u objecten aan een specifiek punt op een pagina die ze kunnen worden geplaatst binnen een DIV. Wanneer uw objecten moeten worden wellicht binnen he
Hoe om te zoomen met een MacBook Pro-Trackpad

Hoe om te zoomen met een MacBook Pro-Trackpad

De MacBook Pro-trackpad in wezen functioneert als een computermuis, waardoor u een gemakkelijke manier om uw cursor over het scherm verplaatsen, verplaatst tussen toepassingen en wijzigen van de grootte van de pagina die u bekijkt. Gebruik de zoom-fu
Hoe om te zoomen op een webpagina

Hoe om te zoomen op een webpagina

Als de tekst en afbeeldingen op een website te groot of te klein, voor u om te lezen comfortabel, gebruikt u de zoom-functie ingebouwd in uw browser van het Web om het formaat van de pagina naar uw eigen smaak. Alles op de pagina, met inbegrip van af
Hoe verander de achtergrond van een afbeelding in MS Paint

Hoe verander de achtergrond van een afbeelding in MS Paint

Een snelle manier om een geheel nieuw uiterlijk aan een bestaande installatiekopie is de achtergrond van de afbeelding wijzigen. Een gemakkelijke manier om dit te doen is om het beeld in MS Paint openstellen en een paar tools uit de gereedschapskist
Hoe om te verwijzen naar een afbeelding op een PowerPoint-dia

Hoe om te verwijzen naar een afbeelding op een PowerPoint-dia

Het Internet is overvloed van middelen om te vinden van PowerPoint-afbeeldingen, die kunnen worden gebruikt voor jazz omhoog uw presentatie. Maar enkel omdat u kunt kopiëren of gratis downloaden van een afbeelding van een website betekent niet dat u
Hoe om in te zoomen op een scherm

Hoe om in te zoomen op een scherm

Zowel Windows als Mac besturingssystemen hebben nuttige zoomen mogelijkheden. Fotobewerking is eenvoudiger wanneer u op een specifiek gedeelte van de foto inzoomt. Websites hebben soms ook-small schrijven. Misschien uw ogen zijn vermoeid of je zit ve
Hoe plaatst u een afbeelding in een div-element

Hoe plaatst u een afbeelding in een div-element

Met behulp van de tag "DIV" HyperText Markup Language, kunt u het plaatsen van afbeeldingen op uw webpagina. Webontwikkelaars gebruiken het "DIV" HTML-code voor het opmaken van tekst of afbeeldingen. De "align" parameter die
Hoe om te herstellen van een verwijderd Account op een Mac

Hoe om te herstellen van een verwijderd Account op een Mac

Zoals met de meeste alles Mac-gerelateerde, een verwijderde gebruikersaccount herstellen is eenvoudig. Er zijn een paar verschillende manieren aan een gebruikersaccount verwijderen, en helaas niet elke manier zorgt voor een "undo". Hier is hoe o
Hoe om te verkopen van een auto met uitstekende Finance

Hoe om te verkopen van een auto met uitstekende Finance

Verkoop een auto waarvan u niet de eigenaar ronduit blijken moeilijk, maar het hangt ervan af hoeveel u moet betalen en hoe gemakkelijk het is om een pandrecht release zodra de lening is betaald. Idealiter moet u verschuldigd minder dan kunt u uw aut
Hoe toe te passen voor een boomgaard Bank creditcard

Hoe toe te passen voor een boomgaard Bank creditcard

Als u op zoek bent om te leggen of te herstellen van uw krediet, nadenken van toepassing zijnd voor een boomgaard Bank credit card. Boomgaard Bank heeft een verscheidenheid van Orchard creditcards aan het beste past bij uw behoeften, zoals platina, k
Hoe om te voorkomen dat een hond zijn oren krabben

Hoe om te voorkomen dat een hond zijn oren krabben

Oor krabben kan een chronisch probleem in veel honden. Honden oren moeten worden gereinigd en controleer regelmatig op tekenen van parasieten en infecties, en met slechts een paar simpele leveringen, kunt u ervoor uw hoektand metgezel nooit last van
Hoe te vissen draad door een plafond

Hoe te vissen draad door een plafond

Wanneer u uw eigen remodelleert of elektrische reparaties aan het doen zijn, kan je jezelf soms vinden in moeilijke situaties. Koude, spinnenweb gevulde crawl ruimten, vochtige kelders en strakke zolders zijn allemaal slechts een deel van de baan. Di
Hoe lang Is het na een handicap Award te krijgen de eerste controleren?

Hoe lang Is het na een handicap Award te krijgen de eerste controleren?

De Social Security Administration biedt verzekeringen die arbeidsongeschiktheidsuitkeringen biedt. Opzetten van uw handicap met het federale agentschap om zich te kwalificeren voor veiligheid aanvullende verzekeringen of sociale zekerheid invaliditei
Hoe om te noemen van een alinea

Hoe om te noemen van een alinea

Onder vermelding van specifieke informatie kan zijn verwarrend want er verschillende regels voor specifieke citaten zijn. Verschillende schrijven stijlen informatie nodig op verschillende manieren worden aangehaald. Bijvoorbeeld, zijn American Psycho