[TYPO3-german] Bild beim MouseOver austauschen

[bernd wilke]

Gerhard Obermayr schrieb am Sun, 05 Oct 2008 08:02:27 +0200:

> 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

prinzipiell gibt es zwei ansätze:

CSS:
die Bilder als Hintergrundbilder einbinden, wobei das eine nur bei 
MouseOver sichtbar ist.
Da der IE6 kein :hover bei anderen Tags als <a> erkennt, musst du ggfls 
einen pseudo Link basteln 
<a href="#" class="bildtausch">&nbsp;</a>
dazu das CSS:
a.bildtausch { background-image:url(bild1.png); width:123px; 
height:321px; display:block;}
a:hover.bildtausch { background-image:url(bild2.png); }


javascript:
wird überall funktionieren wo javascript aktiv ist. Ohne Javascript ist 
das Bild halt statisch.
<div class="bildtausch" onMouseOver="switch('bild2.png')" 
onMouseOut="switch('bild1.png')"><img src="bild1.png" alt=".." 
title=".." /></div>
und natürlich vorher die function switch() definieren:

function switch(pic) {
	this.innerHTML='<img src="'+pic+'" alt=".." title=".." />';
}

alle Beispiele sind nur als Anregung zu verstehen und stellen keinen 
funktionierernden syntaktisch korrekten Code dar!!!
Tippfehler inklusive.

bernd
-- 
http://www.pi-phi.de/t3v4/cheatsheet.html