Der DIV-Tag ist aus DHTML nicht wegzudenken.
Erst mit ihm ist es möglich, ganze HTML-Bereiche
zu Blöcken zusammenzufassen, zu positionieren,
ein oder ausblenden, oder aber auch in Bewegung zu versetzen.
Die Vorgehensweise ist dabei sehr einfach.
1. HTML erzeugen
2. Den gewünschten Bereich in den Div-Tag setzen.
<p>Ein Text, ich weiß, benutz
ich viel zu oft, aber mir fällt nichts anderes ein</p>
<img src="bild.png">
<p>Okay, noch eine Textzeile</p>
Im nächsten Schritt die HTML-Anweisungen in den Div-Tag setzen.
<div id="block1">
<p>Eine Text, ich weiß, benutz
ich viel zu oft, aber mir fällt nichts anderes ein</p>
<img src="bild.png">
<p>Okay, noch eine Textzeile</p>
</div>
Über JavaScript und DOM kann nun der gesamte DIV-Block beeinflusst werden,
z.B. genau positioniert, oder aus- und eingeblendet werden.
Beispiel Positionierung
elem=document.getElementById("block1");
elem.style.position="absolute"; 'Soll
nach Maßangaben absolute zum Fenster positioniert werden
elem.style.top="5cm=; 'Vom
oberen Fensterrand 5cm entfernt.
Beispiel aus- und einblenden
elem=document.getElementById("block1");
elem.style.visibility="hidden"; oder zum
einblenden elem.style.visibility="visible";
Das nächste Beispiel soll zeigen, wie sie einen ganzen Block
ein, bzw. ausblenden können. Dazu ein komplettes Dokument.
Das Programm: (Hier
klicken um das Beispiel zu sehen)
<html>
<head>
<title>Div-Tag 1</title>
<script type="text/javaScript">
function verschwinden(a)
{
elem=document.getElementById("tab1");
if (a==0) { elem.style.visibility="hidden"; }
if (a==1) { elem.style.visibility="visible"; }
}
</script>
</head>
<body>
<p><font size="4" color="#008000">Das ist ein Test, der zeigen soll, wieDIV-Blöcke <br>
mit DOM aus- und eingeblendet werden.</font></p>
<p> </p>
<div id="tab1">
<table border="1" width="100%">
<tr>
<td bgcolor="#FFFF00"><font size="3"><b>Na, eine Tabelle halt </b></font></td>
<td bgcolor="#00FFFF"><font size="3"><b>Ich gehör auch dazu</b></font></td>
<td bgcolor="#C0C0C0"><font size="3"><b>ich nicht...</b></font></td>
</tr>
<tr>
<td bgcolor="#FFFF00"><font size="3"><b>Ich bin dann wohl einFeld</b></font></td>
<td bgcolor="#00FFFF"><font size="3"><b>Ich will aber kein Feld
sein</b></font></td>
<td bgcolor="#C0C0C0"><font size="3"><b>ich auch nicht</b></font></td>
</tr>
<tr>
<td bgcolor="#FFFF00"><font size="3"><b>Immer bin ich
unten :-((</b></font></td>
<td bgcolor="#00FFFF"><font size="3"><b>der links ist Pessimist
und der rechts spinnt</b></font></td>
<td bgcolor="#C0C0C0"><font size="3"><b>grrr.... grummel...</b></font></td>
</tr>
</table>
</div>
<p> </p>
<p><b><font color="#0000FF" onMouseOver="verschwinden(0)">Berühr mich damit die Tabelle
verschwindet</font>
<font color="#FF0000" onMouseOver="verschwinden(1)">Berühr mich und sie ist wieder da...</font></b></p>
</body>
</html>