Verwende unsere Suchfunktion
Impressum und Datenschutz
Die NOF-Schule | Startseite
Zum NOF-Forum
trennlinie-im-NOF-Projekt

Java Html - Mouseover Effekte  in NOF

Beispiel 1: Bildmousover


button1

Unsere Forum-Tafel verändert die Beschriftung wenn man mit der Maus drüber fährt. Für den Mouseover-Effekt benötigt man zwei Bilder. In meinem Fall:

button1.png - (onMouseOut)

button2.png - (onMouseover)

button1

button2



Die Position der Motive und die Abmessungen der Bilder sind identisch. Die Bilder unterscheiden sich nur in der Beschriftung. Beide Bilder werden in eine Unterseite eingefügt (von der Navigation ausschließen). Alternativ Bilder im Ordner Images der lokalen Publizierung manuell speicher. 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.png';"
onMouseout="button1.src='../assets/images/button1.png';"

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.

fragezeichenAn dieser Stelle bitte achten:

Pfade zu den Bildern überprüfen!
Je nach Publizierungsstruktur befinden sich Bilder womöglich in anderen Ordnern. Überprüft Sie bitte auf Publizieren-Ansicht, in welchem ordner sich die Bilder befinden.

Auf Groß und Kleinschreibung der Bildnamen und Dateiendungen achten!

Keine Sonderzeichen in den Bild-namen verwenden!




Das Ergebnis wird erst in der lokalen Publizierung sichtbar!
 

Farbmouseover in Tabellenzelle:

Farbe verändert sich beim MouseOver.


 


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='#FF0000'" onMouseOut="this.bgColor='#FFFF00'"


mouseover-farbe

Natürlich kann jede beliebige Farbe eingegeben werden. Sollte beim Mouseout die Ausgangsfarbe wieder erscheinen, so lässt man den Farbcode einfach weg:

onMouseOver="this.bgColor='#E9E9F9'" onMouseOut="this.bgColor=''"

 

Nächste Seite

Seite drucken