Der DIV-Tag

© Archiv

Stellen Sie sich vor, Sie sehen auf einer Webseite ein kleines Vorschaubild, das Sie interessiert. Sie klicken es neugierig an und plötzlich vergrößert sich der Kasten, in dem das Bild zu sehen ist. Er wächst auf eine Dimension, die für ein simples Vorschaubild viel zu groß ist. Doch bevor Sie sich wundern, warum soviel Raum für ein kleines Vorschaubild verschwendet wird, verschwindet das Bild im Kasten und eine gestaltete Präsentation des vergrößerten Bildes samt zusätzlicher Informationen erscheint.

Nachdem Sie alles betrachtet haben, klicken Sie erneut auf den Kasten und er schrumpft zur ursprünglichen Größe. Diese elegante Form der Präsentation können Sie auch auf Ihre Seiten integrieren. Sie brauchen dazu ein paar DIVs und ein kleines JavaScript. Das Skript ist so ausgelegt, dass Sie beliebig viele dieser dynamischen Kästen auf der Webseite einsetzen können. Damit Sie die Positionen, Größen und Inhalte der Kästen frei definieren können, arbeitet das Skript mit einer Reihe von Arrays, in denen die entsprechenden Werte festgelegt sind. Das spart eine Menge an CSS-Klassendefinitionen.

Zustände definieren

Insgesamt zwölf Arrays sind für die Verwaltung der Größen und Positionen zuständig. Dabei werden insgesamt drei Zustände definiert. Die Originalposition der kleinen Vorschau-DIVs, die Zielposition der vergrößerten Ansichten der DIVs und die aktuelle Position der DIVs während der Bewegung. Für jeden Zustand finden Sie vier Arrays, die Breite, Höhe, Abstand von oben und von links beinhalten. Ein weiteres Array speichert die Schwellenwerte (schwellenwert[]), an denen der Inhalt der DIVs ausgewechselt wird. Wir haben den Schwellenwert an die Breite der DIV-Container ausgerichtet, was sich beliebig ändern lässt.

Zwei Arrays sind für die Bewegungen zuständig (bewegungsmelder[] und bewegungsmelder1[]). Diesen Arrays werden die Intervalle zugewiesen, in denen sich die DIV-Container vergrößern oder verkleinern. Das Array "bewegungimgange[]" besteht aus Logikvariablen, aus denen ersichtlich wird, ob eine Bewegung gerade vollführt wird oder nicht. Mit Hilfe dieser Feld-Variablen entscheidet das Skript auch, ob eine neue Bewegung durchgeführt werden darf oder nicht.

Das Skript gestattet zwar parallel ablaufende Bewegungen aller definierten DIV-Container, es erlaubt aber nicht, dass ein DIV, während die Vergrößerung abläuft, verkleinert werden kann. Eine Zoombewegung gleich in welcher Richtung muss immer erst abgeschlossen werden, bevor der Zoom in die andere Richtung aktiviert werden kann. Schließlich sorgt das Array "inhalt[]" für die Aufnahme des HTML-Codes, der je nach Zustand im DIV angezeigt werden soll. Dieses Array ist ein zweidimensionales Array, das HTML-Codes für die kleine und große Anzeige speichert.

Die DIV-Container

Die DIV-Container werden im HTML-Body-Bereich deklariert. Sie brauchen lediglich eine DIV-Klammer für jeden benötigten Container notieren. Jeder Container muss mit einer ID benannt werden. Sie finden in diesem Beispiel die fortlaufenden Namen "kasten1", "kasten2" und so weiter. Aufgrund der laufenden Nummern, können die DIVs per Laufanweisung schnell formatiert werden. Das genau geschieht im Skript nach der Variablendefinition. Die Starthöhe, -breite und -positionen werden genau wie die Inhalte den DIVs zugewiesen.

Im HTML-Code der DIVs finden Sie eine kleine Schaltfläche, die oben links im Container eingeblendet wird. Sie ist mit einem OnClick-Event ausgestattet und ruft die Funktion "mutation( nummer)" auf. Eine zweite Schaltfläche ist dem alternativen Inhalt der DIVs zugewiesen, ein Klick startet die Funktion "demutation( nummer)". Beide Funktionen starten die Intervallfunktionen, die für die eigentlichen Veränderungen der DIVs zuständig sind. "mutation" startet "zoom" und damit das Vergrößern des DIVs, "demutation" startet "zoomout" und damit das Schrumpfen des DIVs.

Vor dem Start der Funktion wird in beiden Fällen mit Hilfe der Variablen "bewegungimgange" kontrolliert, ob die Bewegung ausgeführt werden darf oder nicht. Am Anfang ist "bewegungimgange" auf False gesetzt, es findet keine statt. Wird eine Bewegung gestartet, setzt das Skript "bewegungimgange" auf True und unterdrückt damit weitere Starts der Zoom-Funktionen. Nach Beendigung der Bewegung wird die Variable zurück auf False gesetzt und weitere Aktionen werden erlaubt.

Die Funktion zoom

Die Funktion "zoom" erwartet eine Nummer, die dem DIV entspricht, das verändert werden soll. Diese Nummer wird bei Aufruf der Funktion "mutation" übergeben. Sie entspricht der Laufnummer der ID-Kennung der DIV-Elemente. Aus der Nummer und dem Wort "kasten" wird zunächst die ID-Kennung des zu bearbeitenden DIVs generiert.

Die Positionsangaben in Zeile 4-7 werden nun über die vier Feldvariablen, die den aktuellen Zustand des DIVs beinhalten, verändert. In der globalen Variable "schrittweite" stellen Sie ein, um wie viele Pixel der Kasten vergrößert oder verschoben werden soll. Die If-Abfrage in Zeile 8 entscheidet über den Inhalt des DIVs. Die Variable "schwellenwert" kommt ins Spiel. Es wird kontrolliert, ob die aktuelle Breite gleich dem Schwellenwert ist. Genau dann ändert das Skript den HTML-Code im Container.

Die Gleichheitsabfrage ist entscheidend, denn würde gefragt, ob die aktuelle Breite größer als der Schwellenwert ist, baute das Skript bei jedem Intervallaufruf den HTML-Code erneut in den Container - einmal reicht aber völlig aus! Wichtig in diesem Zusammenhang ist, dass Sie die Schrittweite sehr genau anpassen. Tun Sie das nicht, wird die Bedingungen mitunter niemals zutreffen und der Inhalt wird dann niemals gewechselt. Wenn Sie beispielsweise eine Startbreite von 100 und einen Schwellenwert von 187 setzen, wird bei einer Schrittweite von 5 niemals eine Breite von 187 erreicht!

Die Zeilen 12 bis 15 sorgen dafür, dass bei Erreichen der Zielbreite, -höhe oder -position keine weiteren Veränderungen am DIV vorgenommen werden. Da jeder der vier relevanten Werte einzeln kontrolliert und gegebenenfalls zurückgesetzt wird, ist es für die Funktion völlig gleichgültig, wie groß der Container ist oder an welcher Stelle er positioniert werden soll. In Zeile 16 finden Sie die Abschlussbedingung.

Sind die aktuellen Werte des DIV alle gleich den gewünschten Zielwerten, bricht das Intervall ab. Die Kontrollvariable wird auf False gesetzt, neue Bewegungen dieses DIVs werden dadurch wieder ermöglicht. Die Zeilen 21 bis 25 schließlich zeichnen das DIV bei jedem Funktionsaufruf neu, sodass die Bewegungen auch als solche erkennbar werden. Die Funktion "zoomout" arbeitet auf dieselbe Weise.

Anpassungsmöglichkeiten

Über die globalen Variablen "zeitintervall" und "schrittweite" können Sie die Animation im Tempo steuern. In "zeitintervall" legen Sie die Tausendstelsekunden fest, nach denen die Zoom-Funktionen aufgerufen werden sollen. Niedrige Zeitintervalle und Schrittweiten sorgen dabei für langsame harmonische Bewegungsabläufe.

Um die Positionen der DIVs zu bestimmen, nehmen Sie sich einfach die beschriebenen zwölf Arrays vor. Achten Sie darauf, dass in einem der Arrays beispielsweise die Breiten aller im Skript behandelten DIVs nacheinander aufgelistet sind. Wenn Sie ein viertes DIV einsetzen wollen, müssen Sie jedes der Arrays im Deklarationsbereich des Skripts um einen Wert erweitern und natürlich im HTML-Code die nötige DIV-Klammer setzen.

Wenn Sie die Inhalte der DIVs gestalten wollen, arbeiten Sie einfach mit einem normalen HTML-Editor. Eliminieren Sie nach Fertigstellung des Codes alle Anführungszeichen, die nicht notwendig sind. Notwendige ersetzen Sie durch Apostroph. Zeilenumbrüche werden ebenfalls gelöscht, sodass der gesamte Code in einer Zeile steht.

Diese kopieren Sie einfach in das entsprechende Inhaltsarray hinein. Die Schwellenwerte sind ebenfalls beliebig bestimmbar. Entscheiden Sie selbst, ab welcher Breite der alternative Inhalt im DIV auftauchen soll!

DIE FUNKTION "ZOOM()"

01 function zoom(nr)
02 {
03 idname = "kasten" + nr;
04 aktbreite[nr] = aktbreite[nr] + schrittweite;
05 akthoehe[nr] = akthoehe[nr] + schrittweite;
06 aktoben[nr] = aktoben[nr] + schrittweite;
07 aktlinks[nr] = aktlinks[nr] + schrittweite;
08 if (aktbreite[nr]==schwellenwert[nr])
09 {
10 document.getElementById(idname).innerHTML =
inhalt[nr][1];
11 }
12 if (aktbreite[nr]<zielbreite[nr]) {aktbreite[nr]=ziel
breite[nr]}
13 if (akthoehe[nr]<zielhoehe[nr]) {akthoehe[nr]=zielhoe
he[nr]}
14 if (aktoben[nr]<zieloben[nr]) {aktoben[nr]=zieloben
[nr]}
15 if (aktlinks[nr]<ziellinks[nr]) {aktlinks[nr]=ziel
links[nr]}
16 if (aktbreite[nr]==zielbreite[nr]&& akthoehe[nr]==
zielhoehe[nr] && aktoben[nr]==zieloben[nr]&& akt
links[nr]==ziellinks[nr])
17 {
18 clearInterval(bewegungsmelder[nr]);
19 bewegungimgange[nr] = false;
20 }
21 document.getElementById(idname).style.width = akt
breite[nr];
22 document.getElementById(idname).style.height = akt
hoehe[nr];
23 document.getElementById(idname).style.top = aktoben
[nr];
24 document.getElementById(idname).style.left = akt
links[nr];
25 }