Übungsaufgaben für JavaScript 3

Verwendbare Bilder für die Übungen:

• Fasnet18
• Fasnet18 klein
• Fasnet18 mittel
• Fasnet36
• Fasnet36 klein
• Fasnet36 mittel

• Hundertwasser20
• Hundertwasser20 klein
• Hundertwasser20 mittel
• Hundertwasser24
• Hundertwasser24 klein
• Hundertwasser24 mittel

• Frei verwendbare Fotos aus SELFHTML
• Hintergrund1
• Hintergrund2

Aufgabe 1:

Erstellen Sie ein einfaches vertikales Navigationsmenü, verwenden Sie dazu eine Aufzählung (Liste) und CSS.

Beim Darüberfahren mit der Maus soll jeweils ein anderes Vorschaubild erscheinen.

Beim Daraufklicken mit der Maus soll ein Popup-Fenster mit dem entsprechenden großen Bild geöffnet werden.

Aufgabe 2:

Verwenden Sie die in Aufgabe 1 erstellte Lösung für Ihre Navigation.

Verändern Sie die vertikale in eine horizontale Navigationsleiste - allein durch Variation der CSS-Angaben!

Außerdem soll beim Darüberfahren der Cursor in ein Zeigersymbol (wie bei Links üblich) und der Hintergrund wechseln.

Aufgabe 3:

Verwenden Sie die in Aufgabe 1 oder 2 erstellte Lösung für Ihre Navigation.

Beim Daraufklicken soll nun aber kein neues Fenster mit dem ausgewählten Bild geöffnet werden,
sondern ein inner Frame oder div. Dieses soll sich über die Seite legen.

Variante: Lassen Sie in diesem iframe/div das Bild "aus dem Nichts" bis zur vollständigen Größe wachsen.
(Variante: Sie können auch den iframe/div mitsamt dem Bild gemeinsam wachsen lassen.)