attribute in css zuweisen

[easyAnfaenger26]

Hallo,
ist es möglich mit css einem bild so etwas zu zu weisen? (google hat mich nicht weiter gebracht)

img:hover
{
Pseudocode: [src="anderes_bild.png"];
} 

[tkausl]

So (glaube ich) nicht. Du könntest ein Bild erstellen, welches beide Bilder nebeneinander oder untereinander enthält und dann die Position des Bildes relativ zum umgebenden Div verschieben, sodass immer nur eines von beiden sichtbar ist, oder du machst es mit JavaScript.

[Gast]

zwei divs in ein div packen.
in jedes div ein bild.
wenn ich über das obere div fahre, macht es display none, wenn ich raus geh macht es display: sonstwas.

aber machs doch mit js.

[easyAnfaenger26]

ach klar einfach das vordere bild unsichtbar machen..super idee!

[rudygotya]

Anstelle der <div>iteritis: http://html5doctor.com/the-figure-figcaption-elements/ Fände ich aus semantischer Sicht besser. Für alte Browser den html5shim mit einbinden (oder einfach modernizr).

Das 2. Bild kannst du dann auch als pseudo-Element (::before, ::after) definieren, initial verstecken und bei focus+hover einblenden. Wenn :focus mit defniert ist, auch auf Touch-Devices, die keine Maus haben- und das alles ohne JS. Für den IE8 brauchst du noch die alte Syntax (:before anstelle ::before).

edith sagt: natürlich kannst du auch ein 2. <img> einbinden

Grüße

Basti

[cgee]

CSS Sprites..
http://webkrauts.de/artikel/2007/hov...it-css-sprites

http://jsfiddle.net/9AnG3/

[rudygotya]

Sprites sind zwar clever, aber auch unflexibel. Bild mal eben austauschen ist nicht mehr, für mehrzeilige inline-Elemente musste eventuell den background clippen und ohne das Sprite + CSS generieren zu lassen ist das auch keine sinnvolle Alternative. Sematisch ist das genauso „gut“ wie die bereits vorgeschlagenen divs und dabei nicht weniger komplex wie eine auch im Markup saubere Lösung. Für Touch-Devices ist das 2. Bild so nicht erreichbar.

Wenns um den zus. http-Request geht, gäb's auch noch andere Alternativen wie icon fonts oder ins Markup/CSS eingebettete Bilder.

[Arne Drews]

Ich denke, um das zu klären, hat der TE zu wenig Informationen darüber verloren, was er genau machen will.
In den meisten Fällen arbeite ich auch mit Sprites, insbesondere auf Rücksicht des von rudygotya angesprochenen HTTP-Requests.

Ich sehe den Anwendungsfall eigentlich erst als nicht mehr praktikabel, wenns um "größere" Bilder gehen soll. Da stelle ich dann allerdings auch gerne mal in Frage, ob so ein Bilderwechsel überhaupt nötig ist und wenn ja, wird es sicherlich ein visueller Effekt sein, der die Seite dekorieren soll, was heutzutage mit tausenden von jQuery Plugins CrossBrowser-tauglich umsetzbar ist.

[golfer75]

wie wäre es wie folgt:

<style>
.img1{
	background:url(angezeigtes-bild.jpg);
	width:150px;
	height:150px
}
.img1:hover{
	background:url(anderes-bild.jpg)
}
</style>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="img1">