Hallo,
ich versuche, graphische Links mit den Pseudoklassen a:link etc. zu formatieren, was auch wunderhübsch funktioniert.
Lediglich den bekannten/lästigen gestrichelten Rahmen um aktive Links bekomme ich nicht weg. (Keine Sorge, ich möchte aktive Links nicht unkenntlich machen, sondern nur schöner formatieren).
Die Javascript-"Lösung" mit blur kommt nicht in Frage, da damit nur der active-Status unterdrückt wird und a:active nicht mehr greift (außerdem möchte ich kein Javascript einsetzen).
Hier die abgespeckte Version meiner bisherigen Versuche:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>abc</title>
<style type="text/css">
body { background-color:#0033ff; }
#test
{ border:none 0px;
}
#test a
{ display:block; position:absolute; width:175px; height:59px;
border:none 0px; text-decoration:none;
background:url(img/eidechse-175-3fach-ind.gif) no-repeat 0px 0px;
}
#test a:link { border:none 0px; text-decoration:none; }
#test a:visited { border:none 0px; text-decoration:none; }
#test a:hover
{ border:none 0px; text-decoration:none;
background:url(img/eidechse-175-3fach-ind.gif) no-repeat 0px -59px;
}
#test a:active
{ border:none 0px; text-decoration:none;
background:url(img/eidechse-175-3fach-ind.gif) no-repeat 0px -118px;
}
#test a { border:none 0px; }
#test a img { border:none 0px; }
#test a:link img { border:none 0px; }
#test a:visited img { border:none 0px; }
#test a:active img { border:none 0px; }
#test a:focus img { border:none 0px; }
</style>
</head>
<body>
<div id="test"><a href="#"></a></div>
</body>
</html>
Online unter http://www.ganz-la-gomera.de/echse-test.html
Alles valide (naja, beim HTML kein Kusntstück..)
Mache ich was falsch oder geht es gar nicht?
Oh, in Opera klappt es, in IE und Firefox nicht.
Danke für Eure Hilfe!
Roland