Punktuelles im Web Über mich

Hallo und ich bitte Sie um einen kleinen Moment Ihrer Aufmerksamkeit. Diese Webseiten sind umgezogen, genauer gesagt ist dies ein alter Stand, der etwa 9 Jahre alt ist aus einer alten Sicherung wieder auferstanden ist. Inklusive eines HTML-Parsers in PHP und der alten, originalen Inhalte - die natürlich (Stand November 2018) nach und nach aktualisiert werden. Sehen Sie es als Nostalgie oder einfach Spaß an der Sache.
Vielen Dank!

Inhalte ausblenden

HTML-Seiten sind nach wie vor eine gute Wahl um schriftliche Informationen zugänglich zu machen:
Man kann den Text mit einem einfachen Editor schreiben, man kann Formatierungen setzen und das Dokument mit einem beliebigen Browser dargestellen.

Wird das Dokument zu lang, kann es aber schnell un�bersichtlich werden.
Mit Hilfe von CSS und JavaScript läßt sich dieses Problem aber lösen: Man blendet Teile dynamisch ein oder aus.

�berschrift A
Langer, langer Textblock...
�berschrift B
Noch ein langer, langer Textblock...

Was haben wir gemacht? Was passiert da?
Es ist ganz einfach: Wir haben immer eine �berschrift und einen zugehörigen Textblock. Alle Textbl�cke sind mit einem "div" geklammert und werden �ber CSS global unsichtbar gemacht. Sichtbar sind nur die �berschriften - wir brauchen ja etwas das wir anklicken können. Wird nun eine Überschrift angeklickt, wird über JavaScript das folgende Element sichtbar oder wieder unsichtbar gemacht.

Jedes span- und div-Element muss eine beliebige, aber eindeutige ID haben und die zusammengeh�rigen Tags (Überschrift und folgender Textblock) d�rfen weder durch ein Leerzeichen, noch einen Zeilenumbruch getrennt sein - dieses w�rde sonst als das erste Folge-Element (nextSibling) interpretiert, es würde nichts (erkennbares) passieren.

<span id="u120" onclick="mache(this);">Überschrift A</span><div id="t120">
Langer, langer Textblock...
</div></span>

<span id="u121" onclick="mache(this);">Überschrift B</span><div id="t211">
Noch ein langer, langer Textblock...
</div></span>

Das JavaScript ist nur ein paar Zeilen lang. Das CSS blendet alle Divs aus und h�bscht die (zuerst) ausgeblendeten Bl�cke ein wenig auf.

<style type="text/css">
    span{font-weight: bold; text-decoration: underline; cursor:help;}
    div {
        display: none;
        font-size: 1em; font-weight: normal;
        border-style: dashed; border-width: 1px; border-color: #aaaaaa;
        padding: 10px 10px 10px 10px; 
    }
</style>
<script type="text/javascript">
    function mache(Element){
        var x = document.getElementById(Element.id).nextSibling;
        if(x.style.display == 'block')
         { x.style.display = 'none'; } 
        else 
         { x.style.display = 'block'; };
    };
</script>

Das JavaScript und das CSS können beliebig auf der Seite platziert werden.

http://www.punktuelles-im-web.net unsichtbar.html, zuletzt geändert: 28.4.2010 20:44:00.