Bilderwechsel mit CSS

[Jürgen Herz]

Hallo,

Ziel ist es, ein auf einer Webseite angezeigtes Bild beim Überfahren mit der Maus ohne JavaScript durch ein anderes auszutauschen.

Und ja, so ungefähr geht das (wenn auch nicht im IE):

<div class="change"></div>

div.change {background-image:url(images/rtnew.jpg); width:227px; height:270px;}
 .change:hover {background-image:url(images/rtnew2.jpg);}

Aber ohne CSS gibt's überhaupt kein Bild. Ideal wäre es also, das hier

<img src="images/rtnew.jpg" width="227" height="270" class="change">

per CSS beim Überfahren gegen rtnew2.jpg austauschen zu können. Ohne CSS (bzw. defekten :hover ala IE) gibt's dann zwar keinen Wechsel, aber immerhin das Originalbild.

Ist sowas möglich?

Ciao,
Jürgen

[ShiNtoKu]

Hallo,

Hallo,

Ziel ist es, ein auf einer Webseite angezeigtes Bild beim Überfahren mit der Maus ohne JavaScript durch ein anderes auszutauschen.

Und ja, so ungefähr geht das (wenn auch nicht im IE):

<div class="change"></div>

div.change {background-image:url(images/rtnew.jpg); width:227px; height:270px;}
.change:hover {background-image:url(images/rtnew2.jpg);}

Ja, richtig, das könnte so funktionieren.

Aber ohne CSS gibt's überhaupt kein Bild.

Wie meinen?

Ideal wäre es also, das hier
<img src="images/rtnew.jpg" width="227" height="270" class="change">
per CSS beim Überfahren gegen rtnew2.jpg austauschen zu können.

Das wäre weniger ideal, da du per CSS nicht die Attribute eines HTML-Objektes ändern kannst.

»Ohne CSS (bzw. defekten :hover ala IE) gibt's dann zwar keinen Wechsel, aber immerhin das Originalbild.

Im ersteren Fall (mit div) Wäre doch genau das der Fall..

Viele Grüße
Patrick

[Jürgen Herz]

Aber ohne CSS gibt's überhaupt kein Bild.

Wie meinen?

Ich meine, wenn der Browser das CSS nicht ausführt aus was für einem Grund auch (nicht unterstützt, abgeschalten, kaputt). Dann wird auch rtnew.jpg nicht eingeblendet.

Das wäre weniger ideal, da du per CSS nicht die Attribute eines HTML-Objektes ändern kannst.

Hm, ja gut. Ich hätte ja auch was übersehen haben können.

»Ohne CSS (bzw. defekten :hover ala IE) gibt's dann zwar keinen Wechsel, aber immerhin das Originalbild.

Im ersteren Fall (mit div) Wäre doch genau das der Fall.

Im IE Fall ja, fehlt CSS ganz (jaja, hypothetisch), nicht.

Jürgen

[Ingo Turski]

Hi,

Ideal wäre es also, das hier

<img src="images/rtnew.jpg" width="227" height="270" class="change">

per CSS beim Überfahren gegen rtnew2.jpg austauschen zu können. Ohne CSS (bzw. defekten :hover ala IE) gibt's dann zwar keinen Wechsel, aber immerhin das Originalbild.

Nö. Ideal wäre, wenn das in allen halbwegs modernen Browsern funktioniert, wozu ich jetzt auch mal den IE zähle.
Und das geht duchaus, wenn Du Dir dessen Fähigkeiten überlegst:

:hover funktioniert für Links
a kann bei display:block Weite und Höhe zugewiesen werden
:hover kann die Eigenschaften eines Hintergrundbildes festlegen.

freundliche Grüße
Ingo

[ShiNtoKu]

Hallo,

Nö. Ideal wäre, wenn das in allen halbwegs modernen Browsern funktioniert, wozu ich jetzt auch mal den IE zähle.
Und das geht duchaus, wenn Du Dir dessen Fähigkeiten überlegst:

:hover funktioniert für Links
a kann bei display:block Weite und Höhe zugewiesen werden
:hover kann die Eigenschaften eines Hintergrundbildes festlegen.

Semantisch würde das allerdings im Nirvana enden, einen Link zu deklarieren, der gar keiner ist.

Da sollte man abwägen, wie wichtig das hover-Bild ist und gegebenenfalls alternative Methoden in Erwägung ziehen, das 2. Bild zugänglich zu machen (z.B. per Link).

Viele Grüße
Patrick

[Ingo Turski]

Hi,

Semantisch würde das allerdings im Nirvana enden, einen Link zu deklarieren, der gar keiner ist.

Weißt Du, ob der Hover-Effekt hier nicht zufällig einen Link signalisieren soll? Und selbst wenn nicht - vielleicht gäbe es ja etwas zu verlinken.

Da sollte man abwägen, wie wichtig das hover-Bild ist und gegebenenfalls alternative Methoden in Erwägung ziehen, das 2. Bild zugänglich zu machen (z.B. per Link).

... und da hätten wir z.B. einen..;-)

freundliche Grüße
Ingo

[Jürgen Herz]

Semantisch würde das allerdings im Nirvana enden, einen Link zu deklarieren, der gar keiner ist.
Weißt Du, ob der Hover-Effekt hier nicht zufällig einen Link signalisieren soll? Und selbst wenn nicht - vielleicht gäbe es ja etwas zu verlinken.

Nein, es soll kein Link sein. Bzw. es geht mir bei der Frage nicht um einen konkreten Einsatz. Es interessierts mich allgemein.

Jürgen

[Avalon]

Nein, es soll kein Link sein. Bzw. es geht mir bei der Frage nicht um einen konkreten Einsatz. Es interessierts mich allgemein.

Die eleganteste Methode (funktioniert natürlich nur in Mozilla et al.) ist Meiner Meinung nach das Einfügen des Bildes als anonymous element mittels der CSS-Eigenschaft -moz-binding

http://xulplanet.com/tutorials/xultu/introxbl.html

Gruß
Avalon

[ShiNtoKu]

Hallo,

Weißt Du, ob der Hover-Effekt hier nicht zufällig einen Link signalisieren soll?

Das habe ich ausgeschlossen, da er den Eindruck machte, mehr oder weniger zu wissen wovon er redet und somit gleich ein a-Element verwendet hätte ;)

Und selbst wenn nicht - vielleicht gäbe es ja etwas zu verlinken.

Mit der Not kommt der Link :)

... und da hätten wir z.B. einen..;-)

Ja gut, allerdings macht das dann funktionierende hovern den Link überflüssig :)

Ist wohl einerseits Ansichtssache, aber auch sehr abhängig vom Anwendungsgebiet.
Mit Andy's Lösung fährt man IMHO bei der Sache am besten.

Nix für ungut
Patrick

[Andy]

Hallo!

HTML:
<div class="change"><img src="images/rtnew.jpg" width="227" height="270"></div>
CSS:
div.change {background-image:url(images/rtnew.jpg); width:227px; height:270px;}
div.change:hover {background-image:url(images/rtnew2.jpg);}

div.change img {display: none}

Das müsste doch genau das sein was du wolltest? Ist jetzt aber ungeprüft!

Ciao,
Andy

[Jürgen Herz]

HTML:
<div class="change"><img src="images/rtnew.jpg" width="227" height="270"></div>
CSS:
div.change {background-image:url(images/rtnew.jpg); width:227px; height:270px;}
div.change:hover {background-image:url(images/rtnew2.jpg);}

div.change img {display: none}

[an den Kopf lang]
Ja natürlich! Man muß nur den Vordergrund verschwinden lassen.

Zumindest wenn man den hover nicht vergisst:
  div.change:hover img {display: none}

Danke,
Jürgen

[ShiNtoKu]

Hallo,

Zumindest wenn man den hover nicht vergisst:
  div.change:hover img {display: none}

Brauchst du nicht, da

div.change img {display: none}

auch div.change:hover mit einschliesst .

Viele Grüße
Patrick

[Detlef G.]

Hallo Patrick

Brauchst du nicht, da

div.change img {display: none}
auch div.change:hover mit einschliesst .

Genausoso gut kann aber auch

div.change:hover {background-image:url(images/rtnew2.jpg);}

und

div.change img {display: none}

weggelassen werden.

Es bliebe dann nur:

div.change {background-image:url(images/rtnew.jpg); width:227px; height:270px;}
div.change:hover img {display: none}

Auf Wiederlesen
Detlef

[ShiNtoKu]

Hallo,

Genausoso gut kann aber auch

div.change:hover {background-image:url(images/rtnew2.jpg);}
und
div.change img {display: none}
weggelassen werden.

Nein, da hast du Sinn und Zweck des ganzen nicht kapiert ;)

Er möchte in div.change ein Bild anzeigen, und beim hovern ein anderes. Das img-Element ist nur dazu da, dass ein Bild angezeigt wird, falls CSS deaktiviert, o.ä. wurde. Das blendet er nun per CSS aus, da es mit CSS nicht benötigt wird (im Gegenteil):

Viele Grüße
Patrick

[Detlef G.]

Hallo Patrick

Nein, da hast du Sinn und Zweck des ganzen nicht kapiert ;)

und du?

Er möchte das Originalbild anzeigen (mit und ohne CSS).
Bei funktionierendem CSS soll dieses beim Hovern ersetzt werden.
Warum soll unbedingt das Originalbild ausblendet werden, damit das
Originalbild als Hintergrund erscheit, damit dann dieses Bild beim Hovern
ausgetauscht wird.

Warum soll dann nicht einfach beim Hovern des Originalbild ausgeblendet
werden, damit das Hintergrundbild sichtbar wird?

Auf Wiederlesen
Detlef

[Jürgen Herz]

Hallo ihr beiden,

Warum soll dann nicht einfach beim Hovern des Originalbild ausgeblendet
werden, damit das Hintergrundbild sichtbar wird?

Das auf jeden Fall, ja.
Ich hatte bei meinem letzten Post übersehen, daß Andy beim div.change das Original nochmal in den Hintergrund gesetzt hatte, deshalb hatte ich den :hover beim Ausblenden des Bildes dazugesetzt.
Ich hab's hier aber so:

div.change {width:227px; height:270px;}
 div.change:hover {background-image:url(images/rtnew2.jpg);}
 div.change:hover img {display:none;}

Wobei

div.change {background-image:url(images/rtnew2.jpg); width:227px; height:270px;}
 div.change:hover img {display:none;}

natürlich auch möglich wäre. Das ist zwar kürzer, hat aber Vor- und Nachteil. Denn das Alternativbild wird gleich beim Laden der Seite übertragen.
Der Vorteil, wird's gebraucht ist es gleich da. Der Nachteil, wenn es nicht nur kleine Buttons sind, und mehrere davon auf der Seite sind, kann einiges an Traffic umsonst entstehen sein.

Jürgen

[ShiNtoKu]

Hallo,

und du?

Ich hab deins nich kapiert. Ich glaub in meiner Müdigkeit hat mich irritiert, dass du hier

div.change {background-image:url(images/rtnew.jpg); width:227px; height:270px;}

rtnew.jpg anstatt rtnew2.jpg geschrieben hattest. Mein Fehler, sorry *bierausgebundanstoss*

Viele Grüße
Patrick