715844

Frontpage 97 bis XP: Javascript für Roll-over-Effekt

Sie wollen für Ihr Frontpage-Web eine Navigation mit Schaltflächen und Rollover-Effekt erstellen. Wie muss der dazu nötige Javascript-Code aussehen, und wie lässt er sich einfügen? PC-WELT zeigt es Ihnen.

Anforderung

Fortgeschrittener

Zeitaufwand

Mittel

Problem:

Sie wollen für Ihr Frontpage-Web eine Navigation mit Schaltflächen und Rollover-Effekt erstellen. Wie muss der dazu nötige Javascript-Code aussehen, und wie lässt er sich einfügen?

Lösung:

Sie wollen für Ihr Frontpage-Web eine Navigation mit Schaltflächen und Rollover-Effekt erstellen. Wie muss der dazu nötige Javascript-Code aussehen, und wie lässt er sich einfügen?

Lösung:

Legen Sie zuerst wie gewohnt ein Frontpage-Web oder eine neue Seite an, und fügen Sie dann die Grafiken für die Schaltflächen ein, die der Browser beim ersten Aufruf der Seite anzeigen soll. Wie Sie solche Schaltflächen erstellen, lesen Sie in diesem PC-WELT-Tipp . Platzieren Sie die Grafiken am besten in einer Tabelle. Dadurch erleichtern Sie sich das Positionieren der Elemente auf der Seite.

Markieren Sie nacheinander jede Schaltfläche, und erstellen Sie über das Kontextmenü einen Hyperlink auf die zugehörige HTML-Seite. Wechseln Sie anschließend über die Registerkarte am unteren Fensterrand von der Normal- in die HTML-Ansicht. Fügen Sie in den Anchor-Tag (<a>) der ersten Schaltfläche den Javascript-Aufruf

onMouseOver="changeImages('image1', 'image1on')"

onMouseOut="changeImages('image1', 'image1off')"

ein, und erweitern Sie den IMG-Tag um den Parameter "name=image1". Verfahren Sie entsprechend bei allen eingefügten Schaltflächen.

Führen Sie dabei die Nummerierung (image1, image2, image3, image<N>) sowohl im Scriptaufruf als auch beim Namen-Parameter weiter. Zuletzt müssen Sie noch das Javascript aus der Datei SCRIPT.TXT in den Head-Tag Ihrer HTML-Seite einsetzen.

Sie finden die Datei im Archiv MOVER.EXE Das Archiv enthält außerdem ein Beispielprojekt mit den benötigten Grafiken und drei vorbereiteten HTML-Seiten.

Hinweis: In Frontpage können Sie über "Einfügen, Komponente, Hooverschaltfläche" Schaltflächen mit einem ähnlichen Effekt wie im Tipp beschrieben erstellen. Die Schaltfläche wird dabei jedoch nicht per Script, sondern mit einem Java-Applet erzeugt. Das verlängert die Ladezeiten, und Browser ohne Java-Unterstützung können die Schaltfläche nicht darstellen.

0 Kommentare zu diesem Artikel
715844