nicht angemeldet
Hallo Björn,
mach doch einfach für jeden deiner Buttons ein einzelnes kleines Bild. Baue dir entsprechende <a>-Link-Elemente und verpass diesen IDs, also z.B.
<a href="funbereich" id="fun"> </a>
Im Head-Bereich deines HTML-Dokuments oder in einer externen CSS-Datei definierst du dann das Aussehen dieser Links, also z.B.
#fun {
width:100px;
height:20px;
background-image:url(funButtonNormal.gif);
background-repeat:no-repeat;
text-decoration:none;
}
#fun:hover {
background-image:url(funButtonNormal.gif);
}
passend dazu im Body-Element:
<a id="fun" href="funbereich.html" title="zum Funbereich"> </a>
Vergleiche hierzu:
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus
und
http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background
Mit älteren Browsern (z.B. Netscape Version 4.X und darunter) funktioniert das allerdings nicht, da musst du dann doch mit onMouseover und einem JS-Bildaustausch arbeiten, also z.B. nur im Body-Element:
<a href="#" onMouseover="document.images['fun'].src='funButtonOver.gif'" onMouseOut="document.images['fun'].src='down_normal.gif'">
<img name="fun" src="funButtonNormal.gif" width="100" height="20" border="0" alt="zum Funbereich" title="zum Funbereich"></a>
Vergleiche hierzu:
http://de.selfhtml.org/javascript/beispiele/buttons.htm
Gut kommt in dem Zusammenhang auch eine Funktion zum Vorausladen der Bilder in den Cache, damit sie bei Bedarf auch sofort da sind und das Laden nicht erst beim Drüberfahren mit der Maus beginnt, aber da mach dich mal selbst mit der Suche schlau, da findest du im Self-Bereich bestimmt einiges. wahrscheinlich schadet das dann auch bei der CSS-Variante nicht.
Gruß Gernot