HTML5-Handbuch - die neuen Features von HTML5

id="CoolerLink">
zu. Wenn es, wie im Beispiel, in HTML noch gar nicht gesetzt ist, wird es durch die JavaScript-Anweisung gesetzt. Die Funktion weist dem
href
-Attribut einen der Links zu, welche weiter oben im Script-Bereich als Array deklariert worden sind, und zwar den jeweils nächsten Link. Dazu wird die Variable
AktuellerLink
als Kontrollzähler benutzt. Wenn
AktuellerLink
den Wert 0 hat, wird der erste Link zugewiesen, bei 1 der zweite Link usw. Damit sich die Links ändern, wird der Kontrollzähler mit
AktuellerLink
+= 1; nach jedem Klick auf den Button um 1 erhöht. Wenn er die Anzahl der verfügbaren Links erreicht hat, wird er wieder auf 0 gesetzt. Auf diese Weise kann der Anwender mit dem Button endlos durch die verfügbaren Links klicken.
    Im Browser hat die Zuweisung an das
href
-Attribut den Effekt, dass der Link nun ausführbar ist und zu der zugewiesenen URL-Adresse führt. Das ist aber nur die eine Hälfte der Aufgabe. Außerdem muss noch der sichtbare, anklickbare Linktext gesetzt bzw. geändert werden. Das geschieht in der Funktion
CoolLink()
durch die Wertzuweisung an
innerHTML
. Diese Objekteigenschaft ist zwar kein ganz sauberes DOM-Scripting, aber in der Praxis sehr bequem, um Elementen dynamisch einen Inhalt zuzuweisen. Im Browser hat dies den Effekt, dass bei jedem Klick auf den Button nicht nur das
href
-Attribut des Links wechselt, sondern auch der angezeigte, anklickbare Linktext.
10.3.6    CSS-Eigenschaften von HTML-Elementen als Objekteigenschaften
    Seit der DOM-Version 2.0 ist auch geregelt, wie auf CSS-Eigenschaften eines HTML-Elements zugegriffen werden kann. Dabei hat man sich weitgehend an das seinerzeit von Microsoft eingeführte
style
-Objekt angelehnt. Das folgende Beispiel zeigt, wie Sie mit Hilfe der DOM-Technik, eine kleine Animation schreiben können. Dazu dient die Möglichkeit, Elemente mit Hilfe von CSS-Eigenschaften absolut zu positionieren.
Beispiel
    
    
    
    
    
    
    
    
    
    
    
    
    
    Bild 10.8: Zwei Punkte kreisen in unterschiedlicher Geschwindigkeit um das Wort ICH.
Erläuterung
    Innerhalb des
body
-Bereichs werden im Beispiel drei
div
-Bereiche ohne weitere Formatierungen notiert. Die ersten beiden enthalten jeweils eine kleine Grafik –
ichkreis1.gif
ist ein roter Punkt,
ichkreis2.gif
ein blauer Punkt. Beide Grafiken erhalten einen transparenten Hintergrund. Das ist wichtig, da sich die Punkte im späteren Verlauf des Geschehens öfter überlagern werden.
    Im einleitenden

-Tag ist der Event-Handler
onload
notiert. Dieser tritt in Aktion, sobald das Dokument und die Grafiken vollständig im Browser geladen sind. Dann wird die Funktion
Init()
aufgerufen, die im
script
-Element des Kopfbereichs notiert ist. Diese Funktion speichert zunächst einmal Objekte der drei
div
-Elemente