Aktuelle Version vom 1. Mai 2011, 11:32 Uhr

Hovereffekt beim Überfahren eines Catalog-Items=

In diesem Beispiel bezogen auf das Teaserbild

Als Ausgangsbasis stellt der Listener für jedes Item ein Teaserbild dar, auf diesem man zur Detailansicht kommt. Nun möchte man einen Hovereffekt beim Überfahren mit der Maus, in diesem Beispiel ein png Bild mit Leuchteffekt.

Template des Listeners modifizieren

Die Templates findet man in /system/modules/catalog/templates.
Im Listener Template (zb. catalog_liste.tpl) wird bei der Zeile

<div class="value"><?php echo $data['value']; ?>

alle (aktivierten) Felder pro Item im FrontEnd ausgegeben und dargestellt.
Will man einen Hovereffekt haben, nimmt man ein DIV das übergeblendet werden soll.
Innerhalb dieses DIVs kann man Farbflächen, Text oder Bilddaten setzen, völlig egal.
Das DIV erstellt man, indem man nach der oben genannten Zeile

<div class="deinhovereffekt"></div>

einsetzt. Das DIV überlappt das Teaserbild, dadurch hat man keinen Link mehr zur Detailansicht.
Also gibt man noch den Link des Items hinzu den man mit $entry['url'] bekommt.
Kurz erklärt: $entry ist das Array, das alle Felder enthält und ausgibt. ['url'] ist eines der Kinder des Arrays, also ein Feld und zwar die URL zur Detailseite.

<div class="deinhovereffekt"><a href="<?php echo $entry['url']; ?>"></a></div>

Weil man hier ein Bild als Hovereffekt nehmen will, gibt man noch ein span samt url zum Bild gleich mit.
Im Endeffekt der Gleiche, den auch Catalog fürs Teaserbild generiert.

<div class="deinhovereffekt"><a href="<?php echo $entry['url']; ?>"><span class="image first even"><img width="140" height="100" alt="klick mich" src="tl_files/bilddaten/leuchteffekt.png"></span></a></div>

Wenn das Item im Listener nicht nur ein Teaserbild, sondern auch weitere Felder erhält wie Name, Preis oder ähnliches, hätte man jetzt das Problem das über jedem Feld das neues DIV angezeigt wird. Also beschränkt man es mit einer IF Abfrage. In diesem Fall will man den Effekt nur auf das Teaserbild. Dazu braucht man den Spaltenname des Teaserbilds.
In diesem Beispiel wird angenommen, dass das Feld teaserbild heisst ($field=='teaserbild').
Mit der IF Abfrage sieht der komplette Code nun so aus:

<div class="value"><?php echo $data['value']; ?>
<!-- Ab hier euer Code für den Hovereffekt -->
    <?php if (strlen($data['raw'])&& $field=='seiten_teaserbild'): ?>
    <div class="deinhovereffekt" ><a href="<?php echo $entry['url']; ?>"><span class="image first even"><img width="140" height="100" alt="klick mich" src="tl_files/bilddaten/blende.png"></span></a>
    </div>
<!-- Hier endet der Code -->

CSS erweitern

Da das DIV jetzt aber sofort zu sehen ist, versteckt man es per CSS mit display: none;.
Und beim Hover lässt man es anzeigen mit display: block;.
Das Stylesheet könnte zum Beispiel so aussehen:

.layout_liste .item .deinhovereffekt {
display: none;
position: absolute;
height: 100px;
top: 0;
width: 140px;
}
 
.layout_liste .item:hover .deinhovereffekt {
display: block;
position: absolute;
}