Meldung

18.09.2007 - Bilder mit JavaScript in einem HTML-Dokument präsentieren

Mit Bildern lassen sich auf einer Website allerlei Effekte realisieren, welche die Seite interessanter gestalten können. Sie könnnen mit JavaScript Bilder bewegen, vergrößern und verkleinern oder einfach nur ein- und ausblenden. Mit ein wenig JavaScript lassen sich derlei Effekte relativ leicht in die Tat umsetzen. Der Zugriff auf Bildelemente sollte dabei stets über das Document Object Model (JavaScript/DOM) erfolgen. Einzelne HTML-Elemente lassen sich hiermit über entsprechende Methoden gezielt ansprechen und manipulieren. Ein einigermaßen aktueller Browser ist dazu allerdings Voraussetzung.

Anhand einiger Script-Beispiele werden viele Aktionen mit Bildern umgesetzt. Die Manipulation der Bilder erfolgt dabei über das Style-Objekt, mit dem Anpassungen im Stylesheet möglich sind. Diese Anpassungen wirken sich umgehend aus das Layout der Bildelemente aus und wird auch direkt im Fenster des Browsers dargestellt.

In den Beispielen werden Funktionen definiert, welche bestimmte HTML-Objekte teilweise animiert manipulieren. So gibt es eine Funktion, die ein IMG-Element mit Hilfe eines JavaScript-Intervalls Schrittweise scrollen kann. Eine andere Funktion vergrößert oder verkleinert ein IMG-Element Schritt für Schritt. Der Zugriff auf einzelne HTML-Elementobjekte wird über die Methode getElementById realisiert, welche einen Verweis auf das zu manipulierende HTML-Element aus dem HTML-Elementenbaum extrahiert. Die Methode getElementById ist Bestandteil der Schnittstelle des JavaScript Document-Objekts, in dem darüber hinaus weitere Methoden definiert sind, die den Zugriff auf HTML-Elementobjekte ermöglichen.

Alle animierten Manipulationen nutzen die intervallgesteuerte Ausführung von JavaScript-Anweisungen. JavaScript-Intervalle lassen sich über die Methode setInterval starten Dagegen beendet die Methode clearInterval einen zuvor gestarteten Intervall, so dass die entsprechende JavaScript-Anweisung künftig nicht mehr ausgeführt wird. Beide Methoden gehören zur Schnittstelle des vordefinierten JavaScript-Objekts Window.

Auch ein Beispiel, welches ein Bild in einem DIV-Element öffnet ist dabei. Mit diesem DIV-Fenster läßt sich das durch PopUp-Blocker verhinderte Öffnen eines PopUp-Fenster umgehen. Das Bild wird dann nicht in einem gesonderten Browserfenster, sondern in einem eigens zu diesem Zweck erzeugten DIV-Element dargestellt. Wie Sie die einzelnen Beispiele in Ihre Seite einbauen können wird unter JavaScript Code in HTML integrieren erklärt. Hier erfahren Sie die hierzu nutzbaren Möglichkeiten.

Alexander Müller