Ok, Du könntest es folgendermaßen machen:
HTML:
<li class="rennrad"> Rennrad </li>
<li class="kinderrad"> Kinderrad </li>
CSS:
li.rennrad a
{
color:#666666;
background-image:url(images/rennrad-normal.png);
}
li.rennrad a:hover
{
color:#999999;
background-image:url(images/rennrad-hover.png);
}
li.kinderrad a
{
color:#666666;
background-image:url(images/kinderrad-normal.png);
}
li.kinderrad a:hover
{
color:#999999;
background-image:url(images/kinderrad-hover.png);
}
Erklärung: Jedem einzelnen Link weist du eine andere Klasse zu.
Im CSS beschreibst Du für jede Klasse ein anderes Hintergrundbild, und zwar für jede Klasse jeweils ein Bild für den Normalzustand, und ein anderes Bild für den Hover-Zustand.
Wenn das gundsätzlich funktioniert, aber noch nicht so gut aussieht, kannst Du mit folgendem zusätzlichen CSS-Code arbeiten:
background-repeat:no-repeat; /* Icon nicht wiederholen */
background-position:0px 2px; /* Icon positionieren */
padding-left:24px; /* Text-Einrückung, damit sich Icon und Text nicht überlappt */
Du siehst, dass der CSS-Code durch das alles sehr lang wird. Daher solltest Du die CSS-Anweisungen nicht mehr direkt ins HTML packen, sondern auslagern, z.B. in den Seitenkopf oder in eine extra Datei ("styles.css").
Wenn Di das alles zu kompliziert ist, kannst Du einfach mit folgendem HTML-Code viel erreichen:
<a href="kinderrad.htm"><img src="images/kinderrad-normal.png" alt="" title="" onmouseover="javascript:this.src='images/kinderrad-hover.png'" onmouseout="javascript:this.src='images/kinderrad-normal.png'" /></a>
Bei dieser Lösung machst Du Icon + Text zusammen in ein Bild kinderrad-normal.png.
Frü den Hover-Zustand nimmst Du dasselbe Bild, nur mit anderen Farben.
Für die Suchmaschinen ist das nicht optimal, da die Suchmaschine bei dieser Lösung keinen Text finden kann (und Bilder können bislang nicht ausgelesen werden).
