Ampelschaltung
Demonstration von Eventhandlern in JavaScript
Aufgabenstellung
Funktionalität
Das Bild einer Verkehrsampel soll per Hyperlink-Berührung mit dem Mauspfeil geändert werden.
Programmlogik
Bei Berührung von Hyperlinks soll ein Bildaustausch stattfinden, gleichzeitig soll es unter oder neben dem Ampelbild einen passenden Hinweis zur jeweiligen Ampelphase geben.
Sprache
Für die Umsetzung ist nur JavaScript vorgesehen, zusätzlich darf CSS zur Optimierung der Darstellung genutzt werden.
Darstellung und Aufbau
Das Bild einer Verkehrsampel wird zentriert auf der Seite angezeigt. Im inaktiven Zustand (es wird kein Link mit dem Mauspfeil berührt) wird die Animation einer Ampel mit einem blinkenden gelben Licht gezeigt. Dafür kann entweder aus den von mir vorgegebenen Bildern eine GIF-Animation erstellt und eingebunden werden, alternativ ist aber auch ein Intervall-Wechsel zwischen gelb.png und aus.png per JavaScript möglich.
Neben oder unter dem Bild gibt es zur Steuerung der Ampel passende Hyperlinks für alle vier möglichen Ampelphasen (Rot, Rotgelb, Gelb, Grün).
Weitere Vorgaben/Einschränkungen
Zur Übung soll für das Ansprechen des Bildes und des Textfeldes möglichst sowohl das vom Webbrowser bereitgestellte Array "img[]" mit dem passenden Indexwert (der wievielte IMG-Befehl im Code, beginnend bei Index 0) als auch ein selbstgewählter ID-Parameter mit der "innerHTML"-Eigenschaft zum Einsatz kommen.
Erstellungsdatum
Aufgabe und Programmdemonstration wurden im Juni 2004 von Gerd Schiefer erstellt.