Sluit venster en keer terug naar Scroll Menu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DHTML voorbeeld</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
var maxout = 263; //Maximale uitklappos.
var minin = 140; //Maximale inklappos.
var step = 5; //Stapgroote
var xpos = minin; //Positieteller wordt gezet op start positie
var obj,IE = document.all, NS4 = document.layers, NS6 = (!IE&&document.getElementById); //test welke browser, alleen correcte syntax resulteerd in true.
if (IE) obj="document.all['down'].style" //IE en Opera syntax
if (NS4) obj="document.layers['down']" //Netscape 4 syntax
if (NS6) obj="document.getElementById('down').style" //Netscape 6 syntax
function move()
{
if (xpos < maxout) //Pos. is kleiner dan uitklappos. => Uitklappen
{ move_out();
return; } //zodat er niet direct wordt ingeklapt(routine gaat terug naar begin van function)
if (xpos > minin) //Pos. is groter dan inklappos. => Inklappen
{move_in();}
}
function move_out()
{ //alert('goed'); Dit kan overal geplaats worden voor messagebox debugging
if ( xpos < maxout) //Max uitklappos. niet bereikt? => Verder uitklappen
{xpos = xpos + step;
//alert(obj + '.left="' + xpos +'px"');
eval(obj + '.left="' + xpos + 'px"'); //Beweging
setTimeout("move_out()", 10); //wacht 10 eenheden
}
}
function move_in()
{
if (xpos > minin) //Inklappos. niet bereikt? => Verder inklappen
{ xpos = xpos - step;
eval(obj + '.left="' + xpos + 'px"'); //Beweging
setTimeout("move_in()", 10); //wacht 10 eenheden
}
}
//-->
</script>
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
body {
background-color: #000099;
}
#text {
position:absolute;
left: 175px;
top: 250px;
z-index:3;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: normal;
color: #CCFF00;
}
#up {
position: absolute;
left: 10px;
top: 70px;
z-index: 2;
border: 0px none #CC6633;
}
#down {
position: absolute;
left: 140px;
top: 83px;
z-index: 1;
}
#home {
position: absolute;
left: 10px;
top: 450px;
z-index: 4;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #CCFF00;
}
#verhaal {
position: absolute;
left: 420px;
top: 70px;
z-index: 5;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: normal;
color: #FFFF00;
}
-->
</style>
</head>
<body>
<div id="up"><img src="../images/scroll_1.png" border="0" usemap="#main" />
<map name="main" id="main">
<area shape="rect" coords="31,29,220,66" href="javascript:move('down')" alt="menu" />
</map>
</div>
<div id="down"><img src="../images/scroll_2.png" width="113" height="131" border="0" usemap="#sub" />
<map name="sub" id="sub">
<area shape="rect" coords="13,14,98,35" href="scroll_inh_1.html" />
<area shape="rect" coords="13,55,98,77" href="scroll_inh_2.html" />
<area shape="rect" coords="13,96,98,117" href="scroll_inh_3.html" />
</map>
</div>
<div id="text"><h1>Welkom</h1>Klik 'Multimedia' button<br />voor opties</div>
<div id="home"> <a href="../index.html"><img src="../images/home.gif" border="0" /></a>
Terug naar 'WEBDESIGN'</div>
<div id="verhaal"><span class="style1">...[Hoofdtekst layer]...</div>
</body>
</html>