Ein-Aus Schalter
Display
Dieses JavaScripts zeigt und versteckt einen Container und passt den Text des aufrufenden Links dem Status des Containers an.
getElementById()
Dieser Befehl sucht nur das Element mit der entsprechenden ID.
Der Elementwert kann dann auf 3 Arten verändert werden:
.innerHTML="..."
Das ist nicht DOM aber funktioniert in allen Browsern (hier angewendet)
.firstChild.nodeValue = "..."
.firstChild.data = "..."
Die Beiden sind DOM aber es geht ja mit innerHTML. (Da im IE Zeilenumbrüche nicht als Textnodes erkannt werden, im FF aber schon, greift man mit firstChild leider nicht immer auf das Gleiche zu.)
<script type="text/javascript">
// Zeigt oder versteckt den Container
function show_container(container) { // start function
if (document.getElementById) { // start browser
if (document.getElementById(container).style.display == "none") { // falls geschlossen
document.getElementById(container).style.display = "inline"; // öffnen
document.getElementById('onoff_link').innerHTML="Container 1 schliessen"; // Linktext ändern
} // end if
else if (document.getElementById(container).style.display == "inline") { // falls offen
document.getElementById(container).style.display = "none"; //schliessen
document.getElementById('onoff_link').innerHTML="Container 1 öffnen"; // Linktext ändern
} // end else if
} // end browser
} // end function
</script>
Der Link mit dem Aufruf:
<a href="javascript:show_container('container-1')" id="onoff_link">Container 1 öffnen</a>
Der Container, dessen Styleeigenschaft verändert wird:
<p id="container-1" style="display:none; padding:8px; margin:12px;"> -- Ich bin der Container 1. -- </p>
Visbility
display="none" entfernt das Element, und display="inline" fügt das Element ein, wodurch der nachfolgende Inhalt nach unten geschoben wird.
Wärend visibility="hidden" das Element an Ort lässt, aber einfach nicht zeigt (wodurch es,
als wäre es transparent, denoch seinen Platz beansprucht. Bei visibility="visible" springt darum nichts umher.
Der ganze Code bleibt bestehen, die Änderung sieht so aus:
visibility = "hidden" an Stelle von display = "none" und
visibility = "visible" an Stelle von display = "inline"
Transparent
Durch ein kurzes Javascript im Container kann seine Text- und Hintergrundfarbe auf transparent geschaltet werden.
Selbstverständlich könnte statt den onmouseover und onmouseout auch ein onclick und ein ondblclick verwendet werden, um dem etwas mehr Dauer zu verleihen.
<div id="luftibus" onmouseover="this.style.backgroundColor='transparent'; this.style.color='transparent'" onmouseout="this.style.backgroundColor='Gold'; this.style.color='Black'">Ich bin der Luftibus, ich werde unsichtbar.</div>
Check den Code.