Zusatzinformationen lassen sich auf vielfältige Weise verpacken. Als Link, PopUp, über einen Anker zur Fußzeile, als Einschub oder reizvoll und Platz sparend in einem Kasten, der erst bei Mausberührung seinen Inhalt preisgibt.
Wir konstruieren aus einem CSS-Container einen kleinen Button, den wir fest auf einer beliebigen Position veränkern. Das könnte dann so aussehen:
Info-Button
Berührt nun die Maus den Kasten, vergrößert sich dieser und zeigt einen längeren Text. Auch ein Bild oder eine Kombination aus beiden ist möglich. Verlässt der Mauszeiger den Kasten, verschwindet der Text sofort wieder.
Längerer Text bei Mausberührung
Wie wird der Text hineingezaubert, wo hält er sich die ganze Zeit über versteckt? Natürlich ist er die ganze Zeit über da, allerdings unsichtbar (display : none), eine leichte Übung für CSS.
Live Demo im neuen Fenster
Außerdem verwenden wir den Hover-Effekt, er sorgt dafür, dass bei Mausberührung ein Link sein Aussehen verändert. Das klappt glücklicherweise nicht nur mit Farben oder Unterstreichungen, sondern mit dem Kasten als Ganzes.
Alte Browser können nicht mithalten, sie zeigen den verborgenen Text sichtbar an und ignorieren auch die Formatierung. IE6, Mozilla und Opera 7 haben kein Problem.
Quellcode für den Button mit Text
<div id="kasten"><a href="#">Info<span
class="info">Längerer Text oder anderer Inhalt</span></a></div>
CSS Code
<style>
#kasten {
color : black;
background-color : transparent;
font-family : verdana;
font-weight : bold;
position:absolute; top:50px; left:20px;
z-index:3;
}
#kasten a {
padding: 4px;
border: 1px solid black;
color : black;
background-color : yellow;
text-decoration : none;
display:block;
}
#kasten a:active {
color : black;
background-color : yellow;
}
#kasten a:visited {
color : black;
background-color : yellow;
}
#kasten a:hover {
color : black;
background-color : yellow;
text-decoration : none;
width : 390px;
border : 1px solid black;
}
#kasten a .info {
display : none;
}
#kasten a:hover .info {
color : black;
line-height : 140%;
display : block;
background : white;
font: 12px Verdana;
border : 1px solid black;
padding : 4px;
}
</style>
