Anzeigen/Verbergen

[Manfred]

Hallo,

hier mal ein kurzes Beispiel, wie so etwas realisierbar ist:

Hier das Javascript:

function getStyleSheet(name) {
 if(!name || !document.styleSheets) return null;
 var i = document.styleSheets.length;
    while(i--) {
     var rules = document.styleSheets[i].rules ? document.styleSheets[i].rules :
        document.styleSheets[i].cssRules;
     var j = rules.length;
        while(j--) {
         if(rules[j].selectorText == name) return rules[j];
        }
    }
    return null;
}

function setStyle(name, attr, value) {

// Beispiel: setStyle('.KLASSE', 'EIGENSCHAFT', 'WERT');

var rule = getStyleSheet(name);
    if(!rule) return null;
    if(value) rule.style[attr] = value;
    return rule.style[attr];
}

Du definierst dann eine CSS Klasse wie z.B:

.hide {
 visibility:hidden;
}

Diese Klasse weist du dann einem Element z.B. <div class="hide"></div> oder <img src="..." class="hide">  zu.

In den Link schreibst du dann einfach:

<a href="#" onclick="setStyle('.hide', 'visibility', 'visible');"

Es gibt noch andere Eigenschaften:
   visible = sichtbar
   hidden = versteckt (der Platz wird aber trotzdem belegt)
   collapse = versteckt (der Platz wird für andere Elemente frei)
              Ob es z.B mit img geht weiß ich nicht
   inherit = übernimmt die Eigenschaft vom Elternelement

Beispiel:
<div class="hidden">
   <div class="hidden_inherit">
      ...
   </div>
</div>

Im obigen Beispiel sollten also 2 Klassen definiert werden:

.hide {
 visibility:hidden;
}
.hide_inherit {
 visibility:inherit;
}

Damit kannst du Elemente ein- bzw ausblenden.

Viel Spaß beim Programmieren.

mfg MAnfred