Tipps und Tricks: Links mit zusätzlichen Informationen
Mit Javascript ist diese Technik weit verbreitet. Sobald der Anwender mit der Maus
über einen Link fährt, werden zusätzliche Informationen angezeigt. Dies lässt sich
aber auch mit Stylesheets umsetzen.
Dafür werden die zusätzlichen Informationen, eingeschlossen in <span>-elementen innerhalb des Ankers (Hyperlinks) eingefügt.
So ist es möglich, die Stylesheet-Angaben für diese Elemente mit a:hover
zu verknüpfen.
,
,
,
,
<html><head>
<title>Links mit zusätzlichen Informationen</title>
<style type="text/css">
p,div .info{
font-family:Verdana;
font-size:12px;
color:#000000;
font-weight:normal;
}
div a {
display:block;
float:left;
margin-right:15px;
width:100px;
text-align:center;
}
a .info{visibility:hidden;}
a:hover .info{visibility:visible;}
</style>
</head><body>
<div>
<a href="#">Hyperlink 1
<span class="info">
<br><br>Hier steht mehr zu Hyperlink 1</span></a>
<a href="#">Hyperlink 2
<span class="info">
<br><br>Hier steht mehr zu Hyperlink 2</span></a>
<a href="#">Hyperlink 3
<span class="info">
<br><br>Hier steht mehr zu Hyperlink 3</span></a>
<a href="#">Hyperlink 4
<span class="info">
<br><br>Hier steht mehr zu Hyperlink 4</span></a>
</div>
</body>
</html>
Die Hyperlinks werden ganz normal eingefügt. Zusätzlich fügst du die zusätzlichen
Informationen, eingeschlossen in <span>-Tag, in das Anker-Tag ein.
In diesem Fall sind das zwei Zeilenumbrüche und der Text.
Die Zeile div a {display:block;... formatiert die <a>-Tags
im <div>-Container und deklariert sie u.a. mit
display als Block-Element. Und Block-Elemente, die normalerweise
Zeilenumbrüche erzeugen, lassen sich mit float nebeneinander
positionieren. Dafür muss aber zunächst die Breite festgelegt werden, da Block-Elemente
ohne Angabe 100% breit sind.
Die Zeile a .info{visibility:hidden;} mit den
verschachtelten Selektoren legt für den
class-Selektor .info fest,
dass Elemente unsichtbar sind, wenn diese in einem
<a>-Tag vorkommen. Somit sind die zusätzlichen Informationen zunächst nicht
zusehen.
Ähnlich funktioniert die Zeile a:hover .info{visibility:visible;}. Nur werden
Elemente mit dem class-Selektor .info
sichtbar gesetzt, wenn sie in einem gehoverten Hyperlink vorkommen. D.h. dass der Inhalt der
<span>-Tags sichtbar wird, sobald der User die Maus über den Hyperlink bewegt.
Eine weitere Möglichkeit wäre das <span>-Tag für die zusätzlichen Informationen mit display:none aus dem Textfluß herauszunehmen und beim Hovern mit display:block und position:absolute fest auf der Seite zu positionieren. Die Infos erscheinen dann nicht unter den Hyperlinks, sondern an einer Position auf der Seite.
Browser
Browser, die dieses Feature nicht kennen, zeigen die zusätzlichen Informationen nicht an. Wenn dich das nicht stört, kannst du diesen Tipp überall einsetzen.