Bildaustausch per CSS

[Der Martin]

Hallo,

.bild
{
  background-image:url(images/bild.gif);
  width:130px;
  height:19px;
  display:block;
}

.bild:hover
{
  background-image:url(images/bild1.gif);
}

das wäre doch schon mal ein guter Ausgangspunkt.

hover ist ja doch der Zustand für den aktiven link, oder nicht?

Nein. Die Pseudoklasse :hover trifft für ein beliebiges Element dann zu, wenn der Mauszeiger darüber verweilt (wenn man auf das Element "zeigt"). Für IE bis Version 6 war das noch nicht so beliebig, der hat :hover tatsächlich nur bei Links angewendet.
Mit dem aktiven Zustand eines Links hat das aber nichts zu tun.

Hier werden die Bilder als background-image eingebunden....
Also falsch und dann doch mit IMG arbeiten??

Nein, im allgemeinen ist ein Hintergrundbild genau richtig.

<div id="about"><img src="pics/about_off.jpg" alt="about_off" /></div>

Wozu das div-Element?

div#about {
position:absolute; top:60px; left:350px; width:150px; height:150px;
}

Du kannst ebensogut das Bild direkt formatieren.

Es handelt sich also NICHT um ein Hintergrundbild, sondern um einen Menübutton.

Aha. Also ist das Bild doch Verzierung. :-)
Und ich hoffe, du meinst keinen Button, sondern einen Link - ein Button wäre ja zumindest bei deaktiviertem Javascript funktionslos.

<a href="linkziel">Hier entlang</a>

a  
 { display: block;  
   width: 10em;  
   height: 1.5em;  
   background-image: url(zustand1.png);  
 }  
a:hover  
 { background-image: url(zustand2.png);  
 }

Dazu noch ein bisschen Design-Anpassung, und fertig ist der Weihnachtsbaum.

Om nah hoo pez nyeetz, Chrissie!
[...]
Matthias

Und nächstes Mal bitte ohne TOFU. Danke.

So long,
 Martin