Java Reference
In-Depth Information
krete Technik, wie die Veränderung dabei realisiert wird, ist irrelevant, obgleich DHTML
fast immer als Verbindung von (X)HTML, JavaScript und Style Sheets bezeichnet wird.
Natürlich brauchen nicht zwingend alle drei Techniken beteiligt zu sein. Auch
Animatio-
nen
kann man im Grunde zu DHTML zählen, wenn man für die Animation die gleichen
Techniken (HTML, CSS und JavaScript) verwendet. Wenn man überhaupt eine Diferenzie-
rung zwischen DHTML und Animationen vornehmen will, dann geht das über den Zeitfak-
tor. Denn Animationen laufen über einen längeren Zeitraum ab und erzielen ihre Wirkung
durch diese zeitorientierten Veränderungen. Allgemein zählt die dynamische Veränderung
einer Webseite zu den eindrucksvollsten Anwendungen von JavaScript, aber rein von der
Programmierung her auch zu den einfachsten. Die einzige Krux ist die hohe Inkompatibili-
tät verschiedener Browsermodelle, sofern man explizit alle Möglichkeiten ausreizen will.
Aber diese Probleme nehmen in modernen Browsern immer mehr ab.
8.14.1■DHTML und Animation mit reinem JavaScript
Viele Efekte, die DHTML zuzuordnen sind, lassen sich rein mit JavaScript durchführen,
zum Beispiel der Austausch und die Größenveränderung von Bildern. Wir haben schon
mehrfach gesehen, dass Sie einfach die klassischen HTML-Attribute des
<img>
-Tags mani-
pulieren und mit geeigneten Eventhandlern - etwa für die Reaktion auf das Überstreichen
mit dem Mauszeiger - koppeln müssen. Auch Animationen lassen sich rein durch die zeit-
gesteuerte Manipulation von Graiken durchführen. Das haben wir ebenfalls schon gese-
hen. Der Schlüssel ist der rekursive Einsatz von
window.setTimeout()
. Richtig interessant
wird es jedoch erst, wenn JavaScript und Style Sheets zusammenspielen.
8.14.2■DHTML und Animation mit reinem CSS
Auch CSS selbst bietet einige dynamische Efekte an, die man als DHTML oder gar Anima-
tion bezeichnen kann.
Hover-Efekt
Der bekannteste und ot eingesetzte Efekt dürte der
Hover-Efekt
sein. In so einem Fall
ergibt sich eine Änderung eines Bereichs in der Webseite, wenn dieser Bereich mit dem
Mauszeiger überstrichen wird. Ganz einfach kann man Hover-Efekte für Hyperlinks mit
der CSS-Pseudo-Klasse
:hover
erzeugen. Meist verwendet man diesen Efekt bei Hyper-
links über
a:hover
, aber im Prinzip kann man ihn auch bei anderen Elementen verwenden
(etwa
h1:hover
), wobei das nicht alle älteren Browser unterstützen. Der Hover-Efekt wirkt
sich aber immer nur auf das Element aus, das gerade mit dem Mauszeiger überstrichen
wird. Von daher ist er bedeutend unlexibler als eine Programmierung mit JavaScript.
Den Mauszeiger verändern
Allgemein ändert sich das Aussehen eines Mauszeigers bei einer graischen Oberläche
automatisch, um dem Anwender Rückmeldung darüber zu geben, was in einer bestimmten
Situation auf eine gewisse Mausaktion durch den Anwender passieren wird. Im Fall von
Search WWH ::
Custom Search