Tutorials von Thomas Frei-Herrmann

Tutorial MLR Tabs mit Mouseover versehen

Es bestand der Wunsch die Reiter (Tabs) eines MLR mit einem Mouseover, bzw. einem onClick-Befehl zu versehen und gleichzeitig damit verschiedene Bilder außerhalb dieser Mehrfach-Layout-Region anzuzeigen.

Guckt bitte für den Mousover-Befehl zum Anzeigen unterschiedlicher Bilder auch hier.

Zunächst habe ich mir meine 3 Bilder, die ich hier verwende, in meine Assets-Verwaltung eingelesen, damit NOF diese überhaupt kennt. Dann habe ich das erste Bild (hier die Peonie) ganz normal auf der Seite eingefügt.

Ihr gebt nun diesem Bild eine Objekt-ID, die ich hier “fotowechsel” genannt habe, um diese später im onMouseover Befehl eindeutig ansprechen zu können. Siehe Bild unten.

... weiterhin gebt Ihr in der Objekt-HTML diesem Foto auch noch einen eindeutigen Namen, hier “fotowechsel”. Dazu klickt Ihr im Fenster
“Bild-Eigenschaften” auf den Button “HTML” und fügt diesen Namen “im Tag” (ab NOF 11 “innen”) ein.

name="fotowechsel"

Da NOF eine Mehrfach-Layout-Region selbstständig generiert, kann man nachträglich nicht in diesen von NOF generierten Code eingreifen. Daher habe ich den gesamten von NOF generierten Code einfach komplett auskommentiert.

Markiert also das MLR und wählt den mittleren Button oben im Fenster “Mehrfach-Layout-Bereich-Eigenschaften” und klickt dort dann auf den Button “HTML”

In HTML wird Code mit diesen Zeichen auskommentiert und dann auch nicht mehr verarbeitet.

Vor dem Code

<!-- alles was hier zwischen steht wird nicht verarbeitet - und zum Beenden dieses Befehls -->

Ihr fügt also “voher” <!-- ein und “nachher” -->

Ihr kopiert Euch den von NOF generierten Code des MLR komplett und fügt diesen zum Bearbeiten in Euren Windows-Editor ein.

Ihr tragt nun in jedem <a> Tag (anchor) den onMouseover-Befehl ein.

Also wie im Bild oben zu erkennen ist der erste Layout-Bereich im Code:

<a href="#LayoutBereich1LYR”>Peonie</a>

... dort fügt Ihr den onMouseover-Befehl hinzu mit Bezug auf die ID des Fotos und gebt das Foto an, das bei Maus-über angezeigt werden soll. Achtet dabei auf die korrekte relative Pfadangabe zu Eurem Foto. Von der Home (Startseite) mit einem Punkt ./, von einer Unterseite müssten dort zwei Punkte ../ stehen.

<a href="#LayoutBereich1LYR" onMouseover="fotowechsel.src='./assets/images/peonie-thumb.jpg'">Peonie</a>

Ebenso macht Ihr es mit den anderen Layout-Bereichen in diesem Code.

Den so im Windows-Editor vorbereiteten Code kopiert Ihr dann zurück in die Objekt-HTML des MLR, also über (“vorher”) den von Euch bereits auskommentierten Code.

In meinem zweiten Beispiel habe ich es ebenso gemacht, allerdings nicht mit dem onMouseover-Befehl, sondern eben mit dem
onClick-Befehl. Hier habe ich, da beide MLRs und Fotos auf der gleichen Seite sind, dem aufgezogenen Foto eine andere ID gegeben, nämlich “klicktab”.  Dann würde der Code so aussehen.

<a href="#LayoutBereich4LYR" onClick="klicktab.src='./assets/images/peonie-thumb.jpg'">Peonie</a>

Ebenfalls habe ich in meinem zweiten Beispiel den letzten Tab zu meiner Seite “Tutorial” verlinkt, dieser Link würde z.B. so aussehen.

<a href="#LayoutBereich7LYR" onClick="self.location.href='./html/tutorial.html'">Tutorial</a>

Da dieser so selbst eingefügte Code natürlich von NOF nicht erkannt wird, müsstet Ihr bei einer Änderung des Inhaltes einer MLR-Region dann diese Prozedur auch wiederholen.

nach oben

Viel Erfolg !