Informationsbox für Links
Anzeige Hier werben
Situation
Wenn man zu einem Link zusätzliche Informationen angeben will, wird das meist sehr unübersichtlich.
Da der Benutzer über diesen Link sowieso mit der Maus fährt, kann man in diesem Zuge auch gleich eine kleine Informationsbox anzeigen lassen.
In dieser stehen dann z.B. zusätzliche Informationen zu der Seite die verlinkt ist.
Die Vorbereitung
Als erstes müssen wir die Links so anpassen, damit diese Informationsbox auch angezeigt werden kann.
Dazu fügen wir in jeden Link ein span Element hinzu.
Das sollte dann ungefähr so aussehen:
1 | <a href="#">Link zu einer Seite<span> Auf dieser Seite finde sie etliche Sachen zu foo und bar</span></a>
|
Da span ein inline Element ist, gibt es keine Probleme bei der Validierung
CSS für die Anzeige der Informationsbox
Wir wollen erreichen, dass die Box nur dann angezeigt wird wenn man über den Link fährt.
Deshalb müssen wir das span Element unsichtbar machen und erst anzeigen lassen, wenn man mit der Maus darüber ist.
1
2
3
4
5
6 | a span {
display: none;
}
a:hover span {
display: block;
}
|
Da es dabei aber zu Problemen führen kann wenn noch Text darunter ist, sollten wir die Box etwas absolute positionieren.
Die absolute Positionierung
Mit der absoluten Positionierung erreicht man, dass das jeweilige Element keinen Einfluss auf die Ebene 0 hat.
Auf der Ebene 0 liegt jeder Text / jedes Element wenn keine extra Angabe dafür gemacht wurde.
Nun fügen wir das zu unserer Box hinzu:
1 2 3 4 | a:hover span {
display: block;
position: absolute;
}
|
Verschönerung der Box
Wichtige Eigenschaften in diesem Zug sind z.B. Hintergrundfarbe.
Diese muss nicht angegeben werden damit die Informationsbox erscheint.
Dennoch ist diese sehr Hilfreich, denn sonst kann man den Text, der unter Umständen direkt unter dem Link ist, nicht mehr lesen.
Geschweige denn von dem in der Box.
1
2
3
4
5
6
7
8 | a:hover span {
display: block;
position: absolute;
background: #fafafa;
color: #444;
border: 1px solid #444;
padding: 10px;
}
|
Informationsbox über das title Attribut
Die Informationsbox kann auch eleganter erstellt werden, ohne ein extra Element einzufügen.
Es kann in diesem Fall bei jedem Element benutzt werden, allerdings nur von modernen Browsern.
Ich habe weiter unten auch noch einen JavaScript Teil der bei älteren Browsern funktioniert.
Das HTML
1 | <a href="#" title="Auf dieser Seite finde sie etliche Sachen zu foo und bar">Link zu einer Seite</a>
|
Das CSS
Um meine Box automatisch erstellen zu können benutzen wir die Pseudoklassen :after.
:after bedeutet einfach nur, dass hinter dem jeweiligen Element die Angegeben formatieren wirken sollen.
1
2
3
4
5
6
7
8 | a:hover:after {
content: attr(title);
position: absolute;
background: #fafafa;
color: #444;
border: 1px solid #444;
padding: 10px;
}
|
Das spannende an diesem CSS ist, das content Attribute.
Damit kann der Inhalt des jeweiligen Elementes verändert werden.
Wir fügen in diesem Fall mit dem Wert attr(title) den Inhalt des title Attributs ein.
Die sonstigen Angabe sind dieselben wie oben.
Das JavaScript für ältere Browser
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <style type="text/css">
.informationbox {
display: block;
position: absolute;
background: #fafafa;
color: #444;
border: 1px solid #444;
padding: 10px;
}
</style>
<script type="text/javascript">
function showInformationBox() {
elements = document.getElementsByTagName('*');
for(i = 0;i < elements.length;i++) {
element = elements[i];
if(element.getAttribute('title', false)) {
element.onmouseover = function() {
p = document.createElement('p');
p.className = 'informationbox';
pText = document.createTextNode(this.getAttribute('title', false));
p.appendChild(pText);
this.parentNode.insertBefore(p, this.nextSibling);
}
element.onmouseout = function() {
this.parentNode.removeChild(this.nextSibling);
}
}
}
}
window.onload = function() {
showInformationBox();
}
</script>
<a href="#" title="Auf dieser Seite finde sie etliche Sachen zu foo und bar">Link zu einer Seite</a>
|
Erklärung des JavaScripts
- 14. Zeile: Deklaration der Funktion
- 16. Zeile: Alle Elemente des Dokuments holen
- 17. Zeile:
forSchleife für das Verarbeiten jedes einzelnen Elementes - 18. Zeile: Einfachere Schreibweise erreichen, sonst muss jedes mal
elements[i]geschrieben werden - 19. Zeile: Prüfen ob das Element ein title Attribut hat
- 20. Zeile: Wenn mit der Maus über das Element gefahren wird dann...
- 21. Zeile: ... erstelle ein
pElement - 22. Zeile: ... füge dem
pElement die Klasseinformationboxhinzu - 23. Zeile: ... erstelle einen neuen Textknoten mit dem Inhalt des title Attributes
- 24. Zeile: ... füge dem
pElement den eben erstellten Textknoten hinzu (als Kindknoten) - 25. Zeile: ... füge über die Funktion
insertBeforedaspElement direkt vor das Element ein, welches direkt nach dem Element kommt, über dem man mit der Maus ist
- 21. Zeile: ... erstelle ein
- 27. Zeile: Wenn die Maus das Element wieder verlässt dann ...
- 28. Zeile: ... lösche das Element, welches direkt nach dem Element kommt, das man mit der Maus verlässt
- 35. Zeile: Wenn das Dokument geladen wird dann ...
- 36. Zeile: ... führe die Funktion
showInformationBoxaus
- 36. Zeile: ... führe die Funktion
hat Erfahrungen im Webentwicklungs-Bereich seit mehr als 8 Jahren. Arbeitet als Webentwickler bei einem Verlag in Stuttgart.
Profilseite betrachten
Das ist so nicht valide...
habs nu ned getestet, aber Block-level-Elemente unterhalb von Inline-Elementen sind verboten.
Das heißt, du müsstest den <a>-link noch explizit zum Block-level machen (display:block;)
Simon
Re: Das ist so nicht valide...
Ich finde keine Stelle, bei der ich ein Block Element in ein Inline Element setze...
Zudem würde ein display: block da nicht helfen denn dadurch wird es auch nicht valid
Re: Das ist so nicht valide...
Doch doch... hier machst du das... und block:display bringts schon... (ohne diese styles sind <div> und <span> intern auch identisch)
1 2 3 4 5 6 7 8Re: Das ist so nicht valide...
Jetzt weiß ich was du meinst.
Das Valide hat aber nix mit dem HTML Code zu tun der dort steht.
CSS ist ja nur für die Formatierung, von daher ist das Valide...
Wenn du gerne einen neuen Artikel schreiben willst dann gerne, dann sag ich Goli er soll diesen hier löschen