Hallo,
ich habe jetzt dank Eurer Hilfe das Beispiel fertig, erweitert um den Hover-Effekt.
Es funktioniert in den gängigen Browsern auch IE7, aber nicht in IE6 und älter. Dort funktioniert weder der link noch das Hover.
Meine Fragen:
1. Damit es in IE7 funktionierte, musste ich die Zeilen a.myIlinks .....
nochmals unter #msie .... angeben.
Warum erkennt der IE nicht die anderen CSS-Angaben?
2. Was für ein Hack ist jetzt noch nötig für IE6 und älter?
Hier das Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
<!--
a.myIlinks .invers {
display: none;
}
a.myIlinks:hover .normal {
display: none;
}
a.myIlinks:hover .invers {
display: block;
}
.myIlinks img
{display:inline-block; vertical-align:middle; width:48px; height:40px; border:none;}
.myIlinks span
{display:inline-block; vertical-align:middle;}
.myIlinks .Legende h1
{margin:0;}
.myIlinks .Legende p
{margin-bottom:0;}
#msie .myIlinks img
{zoom:1; display:inline; vertical-align:middle; width:48px;height:40px; border:none;}
#msie .myIlinks span
{zoom:1; display:inline; vertical-align:middle;}
#msie a.myIlinks .invers {
display: none;
}
#msie a.myIlinks:hover .normal {
display: none;
}
#msie a.myIlinks:hover .invers {
display: block;
}
-->
</style>
</head>
<body>
<!--[if lt IE 8]><div id="msie"><![endif]-->
<p>
<a class="myIlinks" href="http://www.example.com">
<span class="normal"><img src="img1.gif" alt ="">Normalansicht</span>
<span class="invers"><img src="img2.gif" alt ="">Hoveransicht</span>
</a>
</p>
<!--[if lt IE 8]></div><![endif]-->
</body>
</html>