Bild und andere HTML-Elemente zoomen

Ein Bild in mit HTML und JavaScript zoomen.

Ein Bild auf Knopfdruck vergrößern und verkleinern, dies geht mit etwas JavaScript Code.

Java-Script Code zum Zoomen von Elementen

Für die Zoom-Funktion verwenden wir folgende Funktion:

<script type="text/javascript">
    function zoom (d, id)
    {
        element = document.getElementById(id);
        if (d == 0)
        {
            nw = element.width*0.9;
            nh = element.height*0.9;
        }
        else
        {
            nw = element.width*1.1;
            nh = element.height*1.1;
        }
        element.width = nw;
        element.height = nh;
    }
</script>

Diese hat zwei Parameter. Die erste gibt an, ob wir vergrößern oder verkleinern wollen. 0 zoom hinaus, 1 oder ein anderer Wert zoomt hinein. Der zweite Parameter ist die ID von unserem HTML-Element.

Das Bild

Fügen wir nun das Bild ein:

<img id="zoomi" src="logo.png" width="300" height="97" />

Unser Bild erhält eine ID, über diese können wir es anschließend an die Funktion übergeben,

Zoom-Buttons

Jetzt noch die Buttons für den Zoom:

<button type="button" onclick="zoom(1, 'zoomi')">+</button>
<button type="button" onclick="zoom(0, 'zoomi')">-</button>

Hier sehen wir auch den Aufruf der Funktion. Einmal „1“ für das vergrößern und einmal „0“ für das verkleinern, außerdem übergeben wir die ID unseres Bildes.

Fertig. Das Bild kann anschließend über die Buttons gezoomt werden.

Das vollständige Beispiel zum Testen finden Sie hier.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.