Bildwechsler

[Lenni]

Hallo,

irgendwie werde Ich nicht fündig.
Daher frage ich hier mal.
Gibt es eine Möglichkeit einen Bildwechsel per css zu realisieren?
Ich weiss zwar wie ich z.B. ein Hintergrund austauschen könnte (<a>) etc.
Ich würde jedoch gerne bei einem IMG Objekt per hover die SRC ändern.
Dabei möchte Ich möglichst auf Java Script verzichten.

Wo finde ich hierzu ein kleine Hilfe?
Oder ist dies gar nicht möglich?

Lenni.

[ChrisB]

Hi,

Gibt es eine Möglichkeit einen Bildwechsel per css zu realisieren?

Ja:

Ich weiss zwar wie ich z.B. ein Hintergrund austauschen könnte (<a>) etc.

Diese zum Beispiel.

Ich würde jedoch gerne bei einem IMG Objekt per hover die SRC ändern.

Das kann CSS nicht.
Es koennte hoechstens von zwei per se im Quelltext eingebundenen Bildern wechselweise das ein sicht- und das andere unsichtbar machen.

MfG ChrisB

[Lenni]

Vielen dank,
Nur leider verhagelt es mir die Formatierung mit einem Hintergrundbild.
Ich habe es zumindest nicht geschafft,

Also mit einem image müsste es dann in etwa wie folgt funktionieren richtig?

#img1 {display: show; }
#img2 {display: hidden; }
#img1:hover {display: hidden; }
#img2:hover {display: show; }

<a href="..."><img src="...1.png" id="img1"/><img src="....2.png" id="img2"/>

Wäre dieser Denkansatz soweit richtig?
-> Syntaktisch bestimmt nicht richtig. Es ging mir nur um das Verständnis.

[Ingo Turski]

Hi,

Wäre dieser Denkansatz soweit richtig?

nein. Aber so kann es z.B. realisiert werden.

freundliche Grüße
Ingo

[Lenni]

Vielen dank, das ist genau die Lösung, die Ich benötige.

Ich muss leider eine Seite ändern, in welcher ein Designer mit Dreamwaver oder was es auch immer war, einen nahezu unleserlichen und aufgeblähten HTML, CSS und JS Code hinterlassen hat.
Ich muss aber ein dynamisches Bildergalerie einbauen und da stört mich sein teuflisches Zeug ganz erheblich.

Vielen Dank.

[Klawischnigg]

Hi there,

Wäre dieser Denkansatz soweit richtig?
-> Syntaktisch bestimmt nicht richtig. Es ging mir nur um das Verständnis.

Stark vereinfacht dargestellt, ja, aber dabei solltest Du berücksichtigen, daß  für den Internet-Explorer ein hovern auf Bildern nicht möglich ist. (Sicher nicht bis Version 6, der aber immer noch sehr verbreitet ist...)

[ChrisB]

Hi,

Nur leider verhagelt es mir die Formatierung mit einem Hintergrundbild.
Ich habe es zumindest nicht geschafft,

Dann beschreibe dein Problem konkreter, dann koennen wir dir damit vielleicht helfen.

Also mit einem image müsste es dann in etwa wie folgt funktionieren richtig?

#img1 {display: show; }
#img2 {display: hidden; }
#img1:hover {display: hidden; }
#img2:hover {display: show; }

display kennt keine Werte show und hidden; visibility wuerde hidden kenne, aber auch kein show - du wirfst da einiges durcheinander. (Wo die Unterschiede in der Ausblendung ueber display oder visibility liegen, ist dir klar?)

Davon abgesehen, wie wuerdest du ein Element "hovern" wollen, welches gar nicht sichtbar ist?
Du musst bei einem Vorfahrenelement (hier deinem Link) ansetzen, dessen hover-Status beruecksichtigen - und dann ueber den Nachfahren-(oder Kind-)selektor die Bilder ein-/ausblenden.

<a href="..."><img src="...1.png" id="img1"/><img src="....2.png" id="img2"/>

Wenn die Bilder nur Verzierung sind, solltest du sie nicht im HTML einbinden, sondern Hintergrundbilder nutzen.

MfG ChrisB

[bleicher]

Grüße,

#img1 {display: show; }
#img2 {display: hidden; }
#img1:hover {display: hidden; }
#img2:hover {display: show; }

von der idee her - das wäre aber eine tolle endlossschleife, nicht?

MFG
bleicher

[Gunnar Bittersmann]

@@Lenni:

Gibt es eine Möglichkeit einen Bildwechsel per css zu realisieren?

Du suchst "CSS sprites":
http://www.webkrauts.de/2007/10/20/hovereffekte-mit-css-sprites/
http://www.alistapart.com/articles/sprites

Live long and prosper,
Gunnar

[minicrispie]

Hallo,

Ich würde jedoch gerne bei einem IMG Objekt per hover die SRC ändern.

bei <img> nicht gerade ... nur wenn du statt <img> ein Div machst, und dieses Mit CSS per hover änderst, dann solte das gehen:

#bild {  
  background:  url(bliblablubb.jpg) no-repeat;  
}  
#bild:hover {  
  background:  url(blablabla.jpg) no-repeat;  
}

[...]

<div id="bil"></div>

MfG. Christoph Ludwig