of bits and bytes

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:

div.switch div.mouse
{
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

Mit einem einfachen Aufbau kann ein netter Mouse-Over Effekt erzeugt werden. Dabei werden zwei Elemente definiert, die dann die gleiche Grösse erhalten und das zweite Element vorerst nicht sichtbar ist.

Der HTML-Code:

<div class="switch">
 <div class="nomouse"><img src="head.jpg" alt="Head"/></div>
 <div class="mouse">It's a head.</div>
</div>


Das CSS:

div.switch div
{
 display: block;
 float: left;
}
div.switch
{
 position: relative;
}
div.switch div
{
 width: 150px;
 height: 120px;
}
div.switch div.mouse
{
 width: 130px;
 height: 100px;
 display: none;
 position: absolute;
 text-align: center;
 padding: 10px;
 background-image: url(halfwhite.gif);
}


Und das alles entscheidende Style Sheet:

div.switch:hover div.mouse
{
 display: block;
}


Dadurch wird der Block mit dem Text sichtbar gemacht. Zur besseren Sichtbarkeit wird ein halbtransparentes/halbweisses Hintergrundbild verwendet.

Die Dateien können hier heruntergeladen werden:
HTML File switchingblock.html
Grafik head.jpg
Grafik halfwhite.gif