Hoverbilder in NOF erstellen

zwei unterschiedliche Methoden für Wechselbilder
Cadfael

by Cadfael

Methode 1

Hoverbild aus einem einzigen Bild

 
1. Ein einziges Bild mit zwei Versionen / Hälften erstellen (siehe links unten).
Im Beispiel links scheint das Bild 200px breit zu sein. In Wirklichkeit hat das Gesamtbild aber eine Breite von 400px und besteht aus zwei “200px Hälften” (im Beispiel mal s/w, mal bunt).  Statt nebeneinander, kann man das Bild auch untereinander doppeln. Dann muss allerdings der Code der Vorlage anders aussehen.
 
2. Man zieht einen Layout-Bereich (200px breit) auf und gibt das gewünschte Bild als Hintergrundbild an. Durch die 200px Breite des Layout-Bereichs ist die bunte Hälfte “versteckt”. Unten rechts in die Ecke des Layout-Bereichs lege ich mir noch ein Clearpixel (hier ein GIF 40 x 40px) unten in der Ecke.
 

3. In der Ansicht “Seiten” über “Texte” / “Formatvorlagen verwalten” / “Neu” eine “Benutzerdefinierte Vorlage“ ”Wechsler” anlegen und bei Formatvorlagenbereich “Site-übergreifend” anklicken.
Im Fenster das dann aufgeht, klickt man auf den Reiter “Hintergrund” und gibt unter “Bildposition ” die Werte “Links” und “Oben” an.
 
4. In der Ansicht “Seiten” über “Texte” / “Formatvorlagen verwalten” / “Neu” eine zweite “ Benutzerdefinierte Vorlage“ ”Wechsler:Hover” anlegen und bei Formatvorlagenbereich wieder “Site-übergreifend” anklicken.
Im Fenster das dann aufgeht, klickt man auf den Reiter “Hintergrund” und gibt unter “Bildposition” diesmal die Werte “Rechts” und “Oben” an.
 
5. Den Layout-Bereich anklicken und über
“Layout-Bereich-Eigenschaften” / “HTML” / “innen” eingeben:

Beispielbild
versuch12

 
class=”Wechsler”
 

 
F E R T I G !
 

Man kann dem Bild / Layout-Bereich auch noch einen Link zuordnen!
Dazu kommt “vorher”: <a href=”http://Ort_des_Links">
und “ nachher”: </a>
 
Da sich in meinem Beispiel nur der Mauszeiger ändern sollte, habe ich als Link <a href=”javascript:void(0)"> eingegeben.

ein einziges Ausgangsbild

Beispielbild mit Link

Beispielbild ohne Link

 
Bild01

(Ausgangs-) Bild01
Bild02

(Ausgangs-) Bild02

 
6. Das Zielbild (Bild02) muss ggf. noch in die Asset-Verwaltung eingebunden (“Datei immer publizieren”) und mit publiziert werden!

Methode 2

Hoverbild aus zwei Bildern

 
1. Zuerst zwei Bilder erstellen (siehe links unten).
Im Beispiel links wird das Bild “Bild01.gif” bei Mouseover durch das Bild “Bild02.gif” ersetzt.
 
2. Ausgangsbild (“Bild01”) an gewünschter Stelle platzieren.
 
Man muss dem Bild nun einen Namen geben. Der Name darf völlig sinnfrei sein, muss aber Buchstaben enthalten, darf keine Bindestriche haben und auf einer html Seite nur einmal verwendet werden!
In meinem Beispiel nenne ich das Bild “Blumenkohl01”. Es könnte auch “N0123” oder “ABC78” heißen. Das Bild anklicken und dann
 
3. über “Bild-Eigenschaften” / ”HTML” “innen ” eingeben:

 
name=“Blumenkohl01”
 

 
4. über “Bild-Eigenschaften” / ”HTML” “vorher” eingeben:

 
<a onMouseover="Blumenkohl01.src='./assets/images/Bild02.gif';"
onMouseout="Blumenkohl01.src='./assets/images/Bild01.gif';">
 

 
(alternativ mit verknüpftem Link:)

 
<a HREF="http://Ort_des_Links"
onMouseover="Blumenkohl01.src='./assets/images/Bild02.gif';"
onMouseout="Blumenkohl01.src='./assets/images/Bild01.gif';">
 

 
5. über “Bild-Eigenschaften” / ”HTML” “nachher” eingeben:

 
</a>
 
Bild02

Zielbild

 
name=“Adlerauge”
 

Beispielbild mit Link

 
name=“Blumenkohl03”
 

 
Mit “Methoden 2” ist es auch möglich, dass ein Layout-Bereich, ein Textfeld oder eine Tabelle ein Bild ansteuert! Probier es!
 

 
Achtung! Liegt die html-Datei nicht im Root, sondern im Ordner “html”, darf der Pfad nicht “./asset/images” heißen, sondern muss “../assests/images” lauten.
(gilt für beide “Methoden 2” ...
 

Methode 2 - Advanced

Hoverbild aus zwei Bildern (und zwei Zielen)

 
Mit dieser Methode kann man auch beliebig viele (kleine) Bilder ein großes Bild ansteuern lassen. Hier veränderen sich gleichzeitig das “Beispielbild” (rechts) und das “Zielbild” (links).
 
1. Wieder erhält jedes Bild einen individuellen Namen.
Da die Namen "Blumenkohl01” und "Blumenkohl02” bereits auf dieser Seite verwendet wurden, nenne ich das Beispielbild "Blumenkohl03” und das Zielbild “Adlerauge”. Dabei gehe ich bei jedem Bild wie oben (in Punkt 3) beschrieben vor und schreibe die Namen innen in die Bild-HTML. Da beim Zielbild keine “aktive Aktion” (bei Mouseover) ausgeführt wird, reicht dort der individuelle Name (“Adlerauge”).

 
name=“Adlerauge”
 

 
2. über “Bild-Eigenschaften” / ”HTML” “vorher” eingeben:

 
<a HREF="http://Ort_des_Links"
onMouseover="Blumenkohl03.src='./assets/images/Bild02.gif';
Adlerauge.src='./assets/images/Bild01.gif';"
onMouseout="Blumenkohl03.src='./assets/images/Bild01.gif';
Adlerauge.src='./assets/images/Bild02.gif';">
 

 
3. über “Bild-Eigenschaften” / ”HTML” “nachher” eingeben:

 
</a>
 

Vor- und Nachteile der beiden Methoden

 
Methode 1 hat den Vorteil, dass man einem Layout-Bereich oder einer Tabelle nur den “class-Befehl” zuordnen muss. Namen müssen keine vergeben werden und auch kein zusätzliches Bild eingepflegt. Zudem ist das Resultat bereits in der Vorschau sichtbar! Dafür ist diese Methode eingeschränkter und beim Laden der Seite muss das komplette (größere / doppelte) Bild geladen werden.
 
Methode 2 hat den Vorteil, dass damit vielfältige Hover-Effekte möglich sind. Bilder können hin und her springen, mehrere kleine Bilder können ein großes Bild oder andere Objekte ansprechen. Zudem muss beim Aufruf der Seite zuerst nur ein (kleineres) Bild geladen werden.
Dafür muss das andere Bild später nachladen. Man muss Namen vergeben (doppelte Vergabe, nur Zahlen, Bindestriche oder vergessene Punkte beim Link führen zu Fehlern). Zudem hat man mehr Tipperei und man sieht den Effekt erst nach dem (lokalen) Publizieren. Wer einzig Online publiziert, sollte die Finger davon lassen, weil man fast immer einen kleinen Fehler einbaut, den man erstmal finden muss ...
 
Viel Spaß beim basteln!
Cadfael