Erläuterungs-Fenster

[Jörg]

Hallo Leute,

ich möchte auf meiner Seite zu einem bestimmten Element eine Erklärung liefern, die als Hilfe dienen soll.

Jedenfalls dachte ich mir, dass ich ein Bild eines Fragezeichens irgendwo einfüge. Wenn man dann mit der Maus darüber fährt, soll sich ein kleines Fenster öffnen (kein neues Browserfenster, sondern eher so eine kleine, farbige Fläche, in der eben etwas steht), in dem dann eine Erklärung, also ein kleiner Text) stehen soll.

Allerdings weiß ich nicht, wie ich das umsetzen soll. Google hat mir keine brauchbaren Ergebnisse geliefert.

Vielen Dank für Hilfe!

[Felix Riesterer]

Lieber Jörg,

da sehe ich zwei Lösungen:

1.) mit CSS (wie bei Ingos Infobox)
2.) mit Javascript (wie bei meinem GB-Hinweis)

Zur ersten Vorgehensweise findest Du ja eine Anleitung auf Ingos Seite. Zur zweiten Vorgehensweise poste ich hier meinen relevanten Code:

    <p id="ip-logging-hinweis">Aus Sicherheitsgr&uuml;nden wird zu Ihrem Eintrag auch Ihre IP mitgespeichert.  
        <span>Aus der Kombination von Zeitpunkt und IP kann bei Ihrem Internet-Provider Ihre Identit&auml;t ermittelt werden. Zugang zu diesen Daten hat aber nur eine Staatsanwaltschaft.</span>  
    </p>  
    <!-- folgendes Script sucht nach dem obigen Absatz -->  
    <script type="text/javascript">
~~~~~~javascript
  
        (  
            function () {  
                var hinweis = document.getElementById("ip-logging-hinweis");  
                var show = document.createElement("a");  
                show.href = "#";  
                show.innerHTML = "(Was bedeutet das?)";  
                show.onmouseover = function () {  
                    this.nextSibling.style.display = "block";  
                };  
                show.onmouseout =  function () {  
                    this.nextSibling.style.display = "none";  
                };  
  
                if (hinweis) {  
                    hinweis = hinweis.getElementsByTagName("span")[0];  
                    hinweis.style.position = "absolute";  
                    hinweis.style.width = "200px";  
                    hinweis.style.border = "1px solid red";  
                    hinweis.style.background = "white";  
                    hinweis.style.padding = "15px";  
                    hinweis.style.display = "none";  
                    hinweis.parentNode.insertBefore(show, hinweis);  
                }  
            } ()  
        )  
    
~~~`</script>`{:.language-html}  
  
Diese Vorgehensweise "funktioniert" auch bei ausgeschaltetem Javascript. Das <span>-Element wird ohne Javascript ganz einfach angezeigt, mit Javascript wird es unsichtbar geschaltet. Um es sichtbar schalten zu können, wird per Javascript ein Link eingefügt, der beim Überfahren mit der Maus das <span>-Element sichtbar schaltet.  
  
Liebe Grüße aus [Ellwangen](http://www.ellwangen.de/),  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)

[Felix Riesterer]

    <p id="ip-logging-hinweis">Aus Sicherheitsgr&uuml;nden wird zu Ihrem Eintrag auch Ihre IP mitgespeichert.  
        <span>Aus der Kombination von Zeitpunkt und IP kann bei Ihrem Internet-Provider Ihre Identit&auml;t ermittelt werden. Zugang zu diesen Daten hat aber nur eine Staatsanwaltschaft.</span>  
    </p>  
  
    <!-- folgendes Script sucht nach dem obigen Absatz -->  
    <script type="text/javascript">
~~~~~~javascript
  
        (  
            function () {  
                var hinweis = document.getElementById("ip-logging-hinweis");  
                var show = document.createElement("a");  
                show.href = "#";  
                show.innerHTML = "(Was bedeutet das?)";  
                show.onmouseover = function () {  
                    this.nextSibling.style.display = "block";  
                };  
                show.onmouseout =  function () {  
                    this.nextSibling.style.display = "none";  
                };  
  
                if (hinweis) {  
                    hinweis = hinweis.getElementsByTagName("span")[0];  
                    hinweis.style.position = "absolute";  
                    hinweis.style.width = "200px";  
                    hinweis.style.border = "1px solid red";  
                    hinweis.style.background = "white";  
                    hinweis.style.padding = "15px";  
                    hinweis.style.display = "none";  
                    hinweis.parentNode.insertBefore(show, hinweis);  
                }  
            } ()  
        )  
    
~~~`</script>`{:.language-html}  
  
Liebe Grüße aus [Ellwangen](http://www.ellwangen.de/),  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)

[wahsaga]

hi,

<p id="ip-logging-hinweis">Aus Sicherheitsgr&uuml;nden wird zu Ihrem Eintrag auch Ihre IP mitgespeichert.
        <span>Aus der Kombination von Zeitpunkt und IP kann bei Ihrem Internet-Provider Ihre Identit&auml;t ermittelt werden. Zugang zu diesen Daten hat aber nur eine Staatsanwaltschaft.</span>

Und wenn ich dich diesbezüglich kontaktieren will, weil ich eine Frage dazu habe - dann erreiche ich dich über die darunter per mailto verlinkte E-Mail-Adresse [e-mail]?

scnr,
wahsaga

[Gunnar Bittersmann]

Hello out there!

ich möchte auf meiner Seite zu einem bestimmten Element eine Erklärung liefern, die als Hilfe dienen soll.

http://1ngo.de/web/infobox.html

See ya up the road,
Gunnar

[twseiten_de]

Hallo,

Tool-Tip per TITLE-Attribut zum Objekt blendet die Sprechblase bei mouseover ein - beim Internet Explorer.

Gruss Tom