Mouseover-Buttons und -Effekte mit CSS

[Struppi]

Hallo also ich bin erstmal nach dem vorgegangen was es hier bei selfhtml zu finden gab. In meiner css steht...

.ahome       {
    display:block;
    background-image:url(images/home_inactive.gif);
    width:58px; height:25px }

.ahome:hover {
    background-image:url(images/home_active.gif);
}

einfacher wäre es, wenn du die sogenannte sliding doors Technik anwendest.

Du definierst _eine_ Grafik für jeden Button in dem jeweils beide Grafiken enthalten sind:

+-----------+
|           |
|text-normal|
|           |
+-----------+
|           |
|text-hover |
|           |
+-----------+

dann einfach in deiner CSS Datei:

a:link
{
background-image: url(....);
background-position: 0 0;
}
a:hover
{
background-position:-XXpx 0;
}

Wobei XX die Höhe einer Grafik ist. Das hat ausserdem den Vorteil, dass deine :hover Grafik auf jeden schon geladen ist.

Struppi.