[TYPO3-UG Freiburg] Abenteuer Traumurlaub

[Thomas Lechler]

Hallo Ben,

kannst Du mir Deine Notizen mal rüber mailen - nicht das mir später noch was 
einfällt :-)

Gruß Thomas


----- Original Message ----- 
From: "Ben Robinson" <benjamecho at web.de>
To: <TYPO3-UG-Freiburg at lists.typo3.org>
Sent: Wednesday, September 28, 2011 4:58 PM
Subject: [TYPO3-UG Freiburg] Snippet: Bildwechsel bei Mouseover per CSS


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?

_______________________________________________
TYPO3-UG-Freiburg mailing list
TYPO3-UG-Freiburg at lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-ug-freiburg