Bild wechseln?

[online]

Hallo,

gibt es die Möglichkeit, ein Rollover - Bild mit css zu erstellen?
Also statt onMouseOver und onMouseOut.

Hoffe, mir kann jemand helfen.

MFG

Online

 

[Oliver Gringel]

Nein, CSS ist nur für Formatierungen zuständig. Dynamische Inhalte musst du mit clientseitigen Scriptsprachen wie z.B. JavaScript machen.

 

[Gumbo]

Das stimmt nicht ganz. Solange die Grafik als Hintergrundgrafik eines Elementes definiert wurde, ist es möglich diese zu ändern. Leider müsstest du dich dabei auf Verweise (a-Elemente) beschränken, da der Internet Explorer z.B. die :hover-Pseudoklasse nur auf Verweisen anwendet.

 

[Oliver Gringel]

Ja, das würde theoretisch funktionieren, nur leider ist das Hintergrund-Bild immer nur so groß, wie das Element, ind dem es ist. D.h. im a-Tag müsste immer auch Text stehen, den man dann natürlich sieht. In der Praxis ist das nicht umsetzbar.

//Edit: Im IE funktioniert das garnicht. Das Bild wird nicht geändert, wenn ich mit der Maus drübergeh. Im Firefox funktioniert das mit einem div z.B. sehr gut.

 

[Gumbo]

Wieso sollte das nicht funktionieren:

<style type="text/css">
	a.test:link,
	a.test:visited {
		width:				Hintergrundgrafikbreite;
		height:				Hintergrundgrafikhöhe;
		background:			url(backgroundimage.static) no-repeat;
	}
	a.test:hover {
		background-image:		url(backgroundimage.hover);
	}
	a.test span {
		display:			none;
	}
</style>

[…]

<a href="[…]" class="test"><span>Alternativtext</span></a>

 

[Oliver Gringel]

Ohne href-Attribut im a-Tag hats nicht funktioniert
Um das ganze dann auch noch Firefox-Kompatibel zu machen:

<style type="text/css">
	div.test,
	a.test:link,
	a.test:visited {
		width:				Hintergrundgrafikbreite;
		height:				Hintergrundgrafikhöhe;
		background:			url(backgroundimage.static) no-repeat;
	}
	div.test:hover,
	a.test:hover {
		background-image:		url(backgroundimage.hover);
	}
	a.test span {
		display:			none;
	}
</style>

[…]

<a href="[…]"><div class="test"><a href="[…]" class="test"><span>Alternativtext</span></a></div></a>

Der äußere a-Tag ist da, damit der Firefox auch noch nen Link drauß macht.

P.S.: Ich glaube, dass ist CSS-Abuse vom feinsten
Und auch ne Memge Quelltext, um ein Rollover-Bild zu machen. Wenn man dann mal n paar mehr haben will, braucht der Besucher 5 Minuten um die Seite runterzuladen

 

[Quaese]

Hi,

Deine Firefox-Variante wäre auch einfach zu erreichen, wenn in a.test:link, a.test.visited ein display: block angegeben wird.

Nicht nur dass es einfach wird, es ist auch noch valide. Denn Blockelemente und weitere A-Elemente sind innerhalb von A-Tags nicht erlaubt
(siehe SelfHTML oder W3C - verschachtelte Links - 12.2.2).

Ciao
Quaese