Der Code im Artikel Bildbeschreibung über Bild anzeigen hat noch zwei Probleme bei älteren Versionen des Internet Explorers:
Internet Explorer 7:
Beim Internet Explorer 7 kann es passieren, dass der Block mit dem Text neben oder verschoben auf dem Bild angezeigt wird. Dadurch wird der Textblock teilweise durch nachfolgende Elemente verdeckt. Durch die explizite Positionsangabe und dem Wechsel von der Variante des Versteckens mittels display-Style zum visibility-Style konnte ich diese Probleme beheben:
{
width: 130px;
height: 100px;
display: block;
visibility: hidden;
position: absolute;
text-align: center;
padding: 10px;
background-image: url(halfwhite.gif);
left: 0px;
}
div.switch:hover div.mouse
{
visibility: visible;
}
Internet Explorer 6:
Hier ist das Problem schwerwiegender. Der Internet Explorer 6 unterstützt keine Unterselektoren nach einem Pseudo-Element. Somit funktioniert das entscheidende Style Sheet nicht. Als Workaround zeige ich den Text im Internet Explorer 6 als ToolTip an. Der JavaScript-Code und die Styles können der aktualiserten Datei entnommen werden.
HTML File switchingblock.html
Grafik head.jpg
Grafik halfwhite.gif
