JavaHtml- Mouseover Effekte - Code-Beispiele und ihre Einfügung in NOF
Beispiel 1: Bildmousover
Unser Download-Button (nur als Beispiel, kein Download angeboten) verändert die Farbe wenn man mit der Maus drüber fährt. Für den Mouseover-Effekt benötigt man zwei Bilder. Beide Bilder werden in eine Unterseite eingefügt (von der Navigation ausschließen). In der Seiten-Ansicht wird das Standbild eingefügt. Bild anklicken > html > Im Tag folgenden Code einfügen:
Code:
name="button1"
onMouseover="button1.src='../assets/images/button2.gif';"
onMouseout="button1.src='../assets/images/button1.gif';"
Die Bildbezeichnung muss natürlich durch den tatsächlichen Datei-Namen ersetzt werden. name=”button1” beschreibt die Aktion und wird für alle weiteren Aktionen dieser Art umbenannt. Auf der Home lautet der Pfad: ./assets, statt ../assets.
Das Ergebnis wird erst in der lokalen Publizierung sichtbar!
Beispiel 2: Farbmousever in Tabellenzelle:
Diese Effekte kann man auch mit Farben bewirken, zum Beispiel in einer Tabellen-Zelle. Nehmen wir an, die Tabellenzelle soll die Farbe verändern, wenn man mit der Maus darüber fährt, und eine neue Farbe annehmen soll, wenn die Maus sich wieder entfernt.
Der Code wird ebenso im Objekt-Html im Tag eingefügt und sieht in diesem Fall so aus:
Code:
onMouseOver="this.bgColor='#F6F8F6'" onMouseOut="this.bgColor='#E9E9F9'"
Oder, wenn beim Mouseout wieder die Standard-Hintergrundfarbe erwünscht ist:
Code:
onMouseOver="this.bgColor='#E9E9F9'" onMouseOut="this.bgColor=''"
Anmerkung: Download-Button freundlicherweise von Inspire-World zur Verfügung gestellt!
Fragen zu den NOF-Tutorials beantworten wir gerne in unserem Netobjects-Forum.
NOF-Tutorial zur Rollover-Komponente von Netobjects hier!
|
