Tutorial Fotowechsel mit Mouseover bzw. getElementById und der Lytebox 5

Hier habe ich den JavaScript Befehl “onMouseover” mit der “Lytebox 5” verbunden. Unten die Erklärung zu getElementById.

Damit ich hier nicht alles doppelt schreiben muss, beschränke ich mich auf das, was ich zusätzlich gemacht habe.

• Bitte guckt für die Anleitungen zur Lytebox 5 hier
   
• Bitte guckt für die Anleitungen zum “onMouseover” Befehl hier
   

Ich habe nun lediglich diese beiden Angaben miteinander verbunden.

Nachdem Ihr den Datei-Link zu dem großen Foto der Lytebox eingetragen habt ...

... klickt Ihr in diesem gleichen Link-Fenster (oben) auf den Button “HTML” ...

... und tragt “im Tag” (ab NOF 11 “innen”) folgende Anweisungen ein:

1. für die Lytebox
2. für den onMousover Befehl
    

... achtet bei der relativen Pfadangabe wieder auf die korrekte Verlinkung zum Bild, welches durch den onMouseover-Befehl angezeigt wird, hier mit einem Punkt ./ (von der Startseite), von einer Unterseite müssten dort zwei Punkte ../ hin.

class="lytebox" data-title="Hibiskus" data-lyte-options="showPrint:true"
onMouseover="fotowechsel.src='./assets/images/Hibiskus50.jpg'"

nach oben

Für die Variante getElementById habe ich folgendes gemacht.

Zunächst habe ich mir ein Textfeld aufgezogen und diesem die ID “details” geben. Dazu stellt Ihr die Arbeitsfläche auf “Fortgeschritten”

> Menü oben > Ansicht > Arbeitsfläche > Fortgeschritten

Die Datei-Links zum großen Bild der Lytebox stellt Ihr ebenso wie bereits oben gezeigt ein und tragt lediglich die Class der Lytebox in der Link-HTML ein.

Markiert das Thumbnail (kleine Bild) und klickt im Fenster “Bild-Eigenschaften” auf den Button “HTML”.

Dort tragt Ihr “im Tag” (ab NOF 11 “innen”) wieder den onMouseover-Befehl mit dem “getElementById” ein.

... achtet bei der relativen Pfadangabe wieder auf die korrekte Verlinkung zu dem Bild das angezeigt werden soll, hier mit zwei Punkten ../ (von einer Unterseite), von der Startseite müsste dort nur ein Punkt ./ hin.

onmouseover="document.getElementById('details').innerHTML='<img src=\'../assets/images/Eichkater50.jpg\' />'"

nach oben

Viel Erfolg!