<- <- Tillbaka!

Nu har några av exempel i dhtml-texten kombinerats här. För musen över länken nedan så kommer ett akvarium fram i ett pop-up fönster. Tänk på att det kan bli oavsiktliga radbrytningar i exempelkoden. Här är de olika lagren angivna med z-index så effekten blir att fiskarna i akvariet simmar bakom vissa växter. Bilderna är transparenta, se mer hur du bör .gif-bilder genomskinliga under avsnittet Grafik. För musen över här för att se mitt akvarium!
<a href="akvarium.html" onMouseOver="window.open('akvarium.html','popup','width=500,height=300');">
För musen över här för att se mitt akvarium!</a>

Inom head-taggarna lägges:
<script type="text/javascript" language="JavaScript">
<!-- function rorelse ()
{
if (document.layers)
{
document.fish.left += 2;
if (document.fish.left > 425)
{
document.fish.left = 25;
}
}
else if (document.all)
{
fish.style.left = parseInt (fish.style.left) + 2;
if (parseInt (fish.style.left) > 425)
{
fish.style.left = 25;
}
}
if ( (document.layers) || (document.all) ) { setTimeout ('rorelse()', 10);
}
}
//-->
</script>

Scriptet anropas via body-taggen:
<body bgcolor="#000099" onLoad="rorelse()">

Inom body-taggarna lägges de olika lagren:
<div id="bak" style="position: absolute; top: 100; left: 75; z-index: 0">
<img src="havbak1.gif" width=124 height=162 alt="växt" border="0">
</div>
<div id="bak1" style="position: absolute; top: 50; left: 200; z-index: 2">
<img src="havbak2.gif" width=93 height=221 alt="växt" border="0">
</div>
<div id="bak2" style="position: absolute; top: 100; left: 325; z-index: 2">
<img src="havbak1.gif" width=124 height=162 alt="växt" border="0">
</div>
<div id="fish" style="position: absolute; top: 200; left: 50; z-index: 1">
<img src="whales.gif" width=75 height=50 alt="fiskar" border="0">
</div>

<- <- Tillbaka!