[TYPO3-UG Freiburg] Snippet: Bildwechsel bei Mouseover per CSS

[Ben Robinson]

Hallo zusammen,

es gibt für Mouseover-Bildwechsel eine TYPO3-Extension "mouseoverimages", die allerdings neue Datenbankfelder benötigt, lange nicht aktualisiert wurde und inkompatibel zu 4.5 ist, daher habe ich mich mal drangesetzt und mittels TypoScript + CSS einen Mouseover-Bildwechsel für normale Bild- bzw. auch Bild-mit-Text-Contentelemente umgesetzt; ein paar Stunden Recherche+Tests für wenige Zeilen Code, wie immer ;-)

Man braucht dazu ein Bild mit doppelter Höhe des gewünschten Einzelbildes. Die obere Hälfte besteht aus dem normalen Zustand, die untere aus dem Hover-Zustand.
Umschlossen wird das Bild von einem DIV (Höhe des Einzelbildes; overflow = hidden.)
Beim hover wird einfach per CSS die Bildposition innerhalb des umschließenden DIV geändert. 


Typoscript (greift, wenn das Inhaltselement "Layout 1" bekommt):
---------------
tt_content.image.20.1.stdWrap{
  wrap = <div class="mouseoverimg" style="height:95px;overflow:hidden;">|</div>
  # style wurde hier angegeben, damit das Bild bei allen Medien (z.B. print) beschnitten wird
  wrap.if.value.field = layout
  wrap.if.equals = 1
}


CSS
-------
div.mouseoverimg{
	position:relative;
}
div.mouseoverimg:hover img{
	position:relative;
	top:-100%;
}


Bislang ist es noch nicht perfekt, denn es funktioniert nur bei einer fest definierten Bildgröße (s.o. 95px -> Doppelbild = 190px).
Vielleicht kann das ja jemand gebrauchen und bei Bedarf erweitern. Eventuell lässt sich die halbe Bildhöhe ja automatisch mit prioriCalc ermitteln?

Mir reicht das momentan so, da die Bildhöhe beim aktuellen Projekt nicht variiert, aber falls das jemand weiterentwickelt, würde ich mich sehr über eine Nachricht freuen, denn sowas kann man ja oft gebrauchen.

Gruß
Ben

http://www.robinson2.com/

P.S. Vielleicht sollten wir öfter mal ein paar Snippets rumschicken?