Tutorials von Thomas Frei-Herrmann

Mouseover und Mouseout


1) Button ohne Link (Objekt-ID: button1). Das Mouseover funktioniert mit den Garten-Fotos ganz genauso.

Ihr zieht Euch zunächst das erste Bild auf, hier “Mouseout.jpg”, das ich in diesem Beispiel mit meinem Foto-Programm bereits beschriftet habe.

NOF vergibt jedem Bild beim Einfügen automatisch eine “Objekt-ID”, die ich hier umbenannt habe in “button1” und zwar hier:

> Bild markieren > Fenster “Bild-Eigenschaften” > letzte Button oben rechts “Aktionen” > “Objekt-ID”

... außerdem gebt Ihr dem Bild noch den Namen zur eindeutigen Zuordnung im Javascript-Befehl

> Bild markieren > Fenster “Bild-Eigenschaften” > erste Button oben links “Allgemein” > Button “HTML”

und fügt dort den Namen (hier “button1”) “im Tag” (ab NOF 11 “innen”) ein. Ich habe hier zusätzlich noch ein “alt” und ein “title” Tag eingefügt

name="button1" alt="Button ohne Link" title="ohne Link"

... dann geht Ihr im

> Fenster “Bild-Eigenschaften” > auf Button “Link” und macht folgendes ...

... oben unter “Linktyp:” > “Externer Link” wählen > unter “Neuer Link:” > “javascript:” wählen und in die
Eingabezeile rechts daneben schreibt Ihr:

void(0);

Dann klickt Ihr in dem gleichen (Link) Fenster unten auf den Button “HTML” und fügt den Code unten
in die “Objekt-HTML” > “im Tag” (NOF 11 “innen”) ein.

Hier bei “onMouseover” > Bild “Mouseover.jpg” und bei “onMouseout” > Bild “Mouseout.jpg”, wobei Ihr dann Euer Bild, hier
“Mouseover.jpg” (NOF kennt dieses ja nicht), noch händisch in den Ordner “images” ...

/assets/images

... im Verzeichnis der lokalen Publizierung auf dem PC (um es auch lokal schon zu sehen) und in das gleiche Verzeichnis auf den Server mittels FTP-Programm kopieren müsst. Bitte achtet hier auch auf die relative Pfadangabe zu diesem Ordner (images).
Ich habe das hier auf der “Home”, meiner Startseite eingebaut, daher nur ein Punkt ./
Auf einer “Unterseite”, die sich im Ordner “html” befindet, müssten dann dort zwei Punkte hin ../ (gehe einen Ordner höher)

onMouseover="button1.src='./assets/images/Mouseover.jpg'" onMouseout="button1.src='./assets/images/Mouseout.jpg'"

... und so sehen die beiden Bilder der Buttons aus.