Die Einsendeaufgaben zu diesem Heft bestehen im Wesentlichen aus Programmieraufgaben. Bitte senden Sie für eine vollständige Lösung Folgendes ein:
Ein Lösungsdokument im Format einer gängigen Textverarbeitung (doc, docx, odt, rtf) mit Ihrem Namen, dem Heftkürzel und Ihrer Vertragsnummer.
Bitte fügen Sie bei Bedarf oder Aufforderung in der Aufgabenstellung zu einer Aufgabe den kompletten Lösungsquellcode und/oder eine Abbildung der Anwendung zur Laufzeit in das Dokument ein.
Tipp:
In jeder Windows-Version können Sie über die Taste den Bildschirminhalt als Grafik in die Zwischenablage kopieren. Aus dieser können Sie das Bild beispielsweise in ein Bildbearbeitungsprogramm einfügen, dort den relevanten Bereich ausschneiden und diesen in Ihr Lösungsdokument einfügen. In neueren Windows-Versionen steht Ihnen mit dem Snipping-Tool auch ein spezielles Werkzeug für diese Dinge zur Verfügung.
Packen Sie alle erforderlichen Dateien zusammen in ein Zip- oder Rar-Archiv und senden Sie dieses Archiv ein. Gerne dürfen Sie auch das Lösungsdokument diesem Archiv hinzufügen. Es ist sowieso am sinnvollsten, wenn alle einzusendenden Dateien in nur einem Archiv übermittelt werden, da die Anzahl der einzuschickenden Dateien über die Webseite beschränkt ist.
1. Aufgabe:
Sie haben in diesem Heft den Hover-Effekt mit CSS kennengelernt. Dabei wird die Formatierung eines bestimmten Bereichs der Webseite beim Überstreichen mit dem Mauszeiger verändert. Wenn der Mauszeiger den sensitiven Bereich wieder verlässt, wird der Originalzustand automatisch wiederhergestellt. Die Flexibilität wird jedoch erheblich erweitert, wenn man solche Effekte mit JavaScript programmiert. Insbesondere kann man auch Dinge ändern, die nicht rein auf Formatierungen des gerade überstrichenen Bereichs beruhen; etwa den Textinhalt eines beliebigen Elements ändern.
Die Eventhandler onmouseover (Mauszeiger kommt in den sensitiven Bereich und startet eine Aktion) und onmouseout (Mauszeiger verlässt den sensitiven Bereich) sind hervorragend dazu geeignet, mittels damit aufgerufener JavaScript-Funktionen die entsprechenden Dinge auszuführen. Allerdings müssen Sie sich dann explizit auch darum kümmern, dass Sie alle Effekte, die Sie beim onmouseover-Event setzen, beim onmouseout-Event wieder auf den Originalzustand zurücksetzen, wenn Sie einen klassischen Hover-Effekt haben wollen. In dieser Einsendeaufgabe sollen Sie so etwas tun.
Folgender Code soll als Webseite die Basis bilden (einsendeaufgabe1.php):
usw.....