Ein Bild in mit HTML und JavaScript zoomen.
Ein Bild auf Knopfdruck vergrößern und verkleinern, geht genauso wie Bild spiegeln und andere Grafikbearbeitungen, 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.
