Mouseover-Buttons mit CSS

[MudGuard]

Hi,

body { background-color:#0000C6; color:#FFFFFF }
a { background:url(navi.gif) no-repeat; width:120px; height:28px }
a.b1 { background:url(navi.gif) no-repeat 0px 0px }
a.b1:hover { background: url(navi.gif) no-repeat -120px 0px }
a.b2 { background:url(navi.gif) no-repeat -0px -28px }
a.b2:hover { background: url(navi.gif) no-repeat -120px -28px }
a.b3 { background:url(navi.gif) no-repeat 0px -56px }
a.b3:hover { background: url(navi.gif) no-repeat -120px -56px }

Das Hintergrund-Bild brauchst Du nicht x-mal angeben, auch das no-repeat nicht, das reicht einmalig im ersten a {}. Nutze die Kaskade.
Es sollte reichen, die background-position für die einzelnen Klassen und Hoverzustände anzugeben.

<a class="b1" style="position:absolute; left:24px; top:25px" href="#"></a>
<a class="b2" style="position:absolute; left:24px; top:56px" href="#"></a>
<a class="b3" style="position:absolute; left:24px; top:87px" href="#"></a>

Wenn Du sowieso jedem Link seine eigene Klasse verpaßt, kannst Du auch die Positionierungs-Angaben in den style-Bereich im head verschieben.
Und dann würde ich statt einmalig verwendeter Klassen eher id-Attribute verwenden.

cu,
Andreas