Zur Navigation

CSS hover mit mehreren Bildern?

1 Robert (Gast)

Hallo Ihr lieben!

Ich such jetzt schon mehrere Tage, aber finde nichts passendes.

Wie schaffe ich es ein Bild auf eine Seite zu stellen, dass bei Rollover sich verändert, gleichzeitig soll aber ein anderes Bild zusätzlich auf der Seite erscheinen.
Wenns auch noch zusätzlich möglich wäre, einen Text irgendwo anzuzeigen, wärs perfekt.

So wie dieser Bildwechsel:
http://www.1ngo.de/web/bildwechsel.html


Vielleicht kann mir ja jemand helfen,

Vielen dank

Robert

02.08.2006 23:01

2 Jörg

Hallo Robert,

irgendwo anzeigen geht mit CSS meines Wissens nicht, aber in einem angrenzenden Bereich wäre dies vielleicht schon möglich. Ich würde es folgendermaßen versuchen. Das betreffende Element muss im Quelltext dem Element untergeordnet sein, welches das Wechselbild als Hintergrundbild enthält, in diesem Fall der Link innerhalb von #changeimg:

<div id="changeimg"><a href="#">&nbsp;
<span>
<!-- Bild(er) und Text, die bei Hover eingeblendet werden sollen -->
</span>
</a></div>

Das Wechselbild wird bei :hover ausgewechselt:

div#changeimg a { background-image:url(bild1.jpg); width:50px; height:50px; }
div#changeimg a:hover  { background-image:url(bild2.jpg); }

Die im span befindklichen Inhalte werden mit display:none ausgeblendet, mit display:block bei :hover wieder ein:

div#changeimg a span { display:none; }
div#changeimg a:hover span { display:block; }

02.08.2006 23:33 | geändert: 02.08.2006 23:40

Beitrag schreiben (als Gast)





[BBCode-Hilfe]