Ein- und Ausblenden (5): Hinweistexte
gedruckt am 04. Feb. 2012
Eine wichtige Anwendung von JavaScript ist das Ein- und Ausblenden von Inhaltsbereichen wie Felder, Untermenü, Bilder und Ähnliches.
Zu beachten ist, dass JavaScript zweimal im HTML-Text vorkommt: es werden die nötigen Funktionen definiert und es wird (in diesem Fall beim Hyperlink) ein Event definiert, der eine bestimmte Funktion aufruft.
<script> im <head>-Bereich der HTML-Seite<script language=”JavaScript”>
<!–
function hilfe_ein() {
document.getElementById(”hilfe”).style.visibility = “visible”;
return
}
function hilfe_aus() {
document.getElementById(”hilfe”).style.visibility = “hidden”;
return
}
//–>
</script>
<body> in HTML-Seite<body>
<div> </div>
<div>
<a href=”index.html” onMouseOver=”hilfe_ein()” onMouseOut=”hilfe_aus()”> typografie</a>
</div>
<div><h2>Titel</h2>
<p>Hierher kommt jeweils der Text zu einem Menüpunkt</p>
</div>
<div id=”hilfe”>Das ist der Hilfetext für das erste Menü</div>
</body>
stylesheet
Damit bei Öffnen der Seite der Hilfetext noch nicht erscheint, wird im Stylesheet die Eigenschaft.hilfe {visibility: hidden;}
gesetzt.
