[TYPO3-german] Bild beim MouseOver austauschen

[Henrik Ziegenhain]

Guten Morgen Gerhard,

du kannst das über das Pseudoelement :hover machen. Hierbei ist allerdings  
zu beachten, dass dieser Effekt im IE6 nicht funktioniert. Ob es hierfür  
einen Hack o.ä. gibt weiss ich jetzt nicht.

Grundsätzlich empfielt es sich so zu machen:

div.deineKlasse {
	background: url(bild.jpg) no-repeat 0 0;
	width: 200px;
	height: 150px;
	...
}
div.deineKlasse:hover {
	background: url(bild.jpg) no-repeat 200px 0;
}

Der Trick dabei ist, dass dein Bild (bild.jpg) aus zwei Bildern besteht  
die übereinander sitzen. Bei Mouseover wird das Hintergrundbild 200px nach  
oben oder unten verschoben und dass zweite Bild rückt in den sichtbaren  
Bereich der Box. Die Bilder befinden sich in einer Datei, da du dann das  
zweite Bild nicht mehr extra nachladen musst und das Bild somit sofort  
erscheint wenn du drüber fährst.

Obiger Code ist nicht getestet!

MfG
Henrik

Am 05.10.2008, 08:02 Uhr, schrieb Gerhard Obermayr <design at cgc.at>:

> Hallo Leute, ich möchte gerne ein Bild beim überfahren mit der Maus
> austauschen, sobald die Maus das Bild verlässt soll wieder das
> Originalbild erscheinen.
> Oder mittels Klick austauschen - oder wie hier -->
> http://www.fdrtools.com/front_d.php so dass man zwei Zustände direkt
> vergleichen kann.
> Hat jemand eine Ahnung, wie ich das angehen soll?
>
> Gerhard
> _______________________________________________
> TYPO3-german mailing list
> TYPO3-german at lists.netfielders.de
> http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-german



-- 
Erstellt mit Operas revolutionärem E-Mail-Modul: http://www.opera.com/mail/