Mouse Over - Beispiel mittel “Picture Rollover Komponente” oder unten mit Mouse Over Befehl

(bitte guckt auch mal hier für den Mouse “Overlib-Effekt”)

... man könnte es auch mittels der “Aktionen” von NOF machen.


Gehe mit der Maus über das Bild ...

... eine Erklärung erübrigt sich hier eigentlich, da das so einfach ist.

> Menüleiste > Ansicht > Komponenten > NetObjects Fusion Komponenten
> Picture Rollover wählen

... alles andere erklärt sich von selbst.

Mouse Over Befehl - guckt bitte auch hier

... oder Ihr macht das mit einem einfachen HTML-Befehl wie im Beispiel unten.

Hierzu macht Ihr folgendes:

Erstellt Euch jeweils ein Piktogramm (Thumb) von Eurem großen Foto und fügt diese Piktogramm auf der Seite ein (hier die 4 kleinen Bilder oben).


Ich habe nun alle großen Fotos zunächst in einen eigenen Ordner “wechselbilder” kopiert um Ordnung zu halten. Diesen Ordner habe ich in dem vorhandenen Ordner von NOF “images” angelegt, also hier:

assets/images/wechselbilder

Bitte vergesst nicht diesen selbst angelegten Ordner “wechselbilder” dann auch händisch mit Eurem
FTP-Programm auf Euren Server in das entsprechende Verzeichnis zu kopieren.


Fügt nun das erste große Foto (hier das Eichhörnchen) auf der Seite ein. NOF vergibt jedem Foto beim Einfügen automatisch eine “Objekt-ID”, die ich hier umbenannt habe in “fotowechsel” und zwar hier:

> großes Foto > 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 “fotowechsel”) “im Tag” (ab NOF 11 “innen”) ein.

name="fotowechsel"

Nun markiert Ihr das erste Piktogramm (hier das mit dem Eichhörnchen) und klickt 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 folgenden Code
in die “Objekt-HTML” > “im Tag” (ab NOF 11 “innen”) ein, hier wieder für das Eichhörnchen, das ich ja bereits in meinen neu angelegten Ordner “wechselbilder” kopiert hatte:

onMouseover="fotowechsel.src='../assets/images/wechselbilder/eichhrnchen.jpg'"

... ebenso macht Ihr es bei den anderen Piktogrammen, natürlich dann mit dem jeweils dazugehörigem großen Foto in der Code-Angabe.


Für ein ähnliches Ergebnis mittels Inlineframe guckt bitte hier.

Viel Erfolg!

zurück