Informationsbox für Links

von Benutzer gelöscht | 0 | 4819 Aufrufe

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:

 
HTML
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.

 
css
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:

 
css
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.

 
css
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

 
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.

 
css
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

 
HTML
 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: for Schleife 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 p Element
    • 22. Zeile: ... füge dem p Element die Klasse informationbox hinzu
    • 23. Zeile: ... erstelle einen neuen Textknoten mit dem Inhalt des title Attributes
    • 24. Zeile: ... füge dem p Element den eben erstellten Textknoten hinzu (als Kindknoten)
    • 25. Zeile: ... füge über die Funktion insertBefore das p Element direkt vor das Element ein, welches direkt nach dem Element kommt, über dem man mit der Maus ist
  • 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 showInformationBox aus
Über den Autor: Benutzer gelöscht
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten