Tutorials von Thomas Frei-Herrmann

Mouseover und Mouseout


2) Button mit Link (Objekt-ID: button2).

Ihr zieht Euch zunächst das erste Bild auf, hier “Gastbuch-Regular.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 “button2” 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 “button2”) “im Tag” (ab NOF 11 “innen”) ein. Ich habe hier zusätzlich noch ein “alt” und ein “title” Tag eingefügt

name="button2" alt="Button Gästebuch" title="Gästebuch"

... dann geht Ihr im

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

... oben unter “Linktyp:” > “Interner oder Externer Link” wählen > wählt Euren internen oder tragt einen externen Link ein.

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 “Gastbuch-Over.jpg” und bei “onMouseout” > Bild “Gastbuch-Regular.jpg”, wobei Ihr dann Euer Bild,
hier “Gastbuch-Over.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.
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="button2.src='./assets/images/Gastbuch-Over.jpg'" onMouseout="button2.src='./assets/images/Gastbuch-Regular.jpg'"

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