Nach langer Zeit habe ich mich mal wieder mit dem Thema beschäftigt und eine Lösung gefunden. Es ist wirklich schwierig, etwas im Netz darüber zu finden. Im Prinzip ist es sehr simpel:
Damit der Link nicht "flackert" fügt man beide Bilder eines Links zu einem zusammen, im folgenden Beispiel horizontal [normal_link1.jpg|hover_link1.jpg] = normal_hover_link1.jpg usw.
Das CSS sieht dann wie folgt aus:
PHP-Code:
a.seite1{display:block;width:50px;height:50px;background:transparent url(normal_hover_link1.jpg) no-repeat;}
a.seite1:hover{background-position:-50px 0;}
a.seite1_visited{display:block;width:50px;height:50px;background:transparent url(normal_hover_link1.jpg) -50px 0 no-repeat;}
a.seite2{display:block;width:50px;height:50px;background:transparent url(normal_hover_link2.jpg) no-repeat;}
a.seite2:hover{background-position:-50px 0;}
a.seite2_visited{display:block;width:50px;height:50px;background:transparent url(normal_hover_link2.jpg) -50px 0 no-repeat;}
und der restliche Code:
Seite 1:
PHP-Code:
<a href="seite1.html" class="seite1_visited"></a>
<a href="seite2.html" class="seite2"></a>
Seite 2:
PHP-Code:
<a href="seite1.html" class="seite1"></a>
<a href="seite2.html" class="seite2_visited"></a>
Wenn es noch eleganter, schöner, kürzer usw. geht, bin ich offen für alles...
Greetz