<html>
<head>
<title>Layers in DHTML</title>
<script language="JavaScript">
function move(x,y,z){
if(!document.getElementById)
return;
for(i=0;i<4;i++){
if(document.form1.what[i].checked)
tomove = document.form1.what[i].value;
}
obj =document.getElementById(tomove);
obj.style.left = parseInt(obj.style.left)+x;
obj.style.top = parseInt(obj.style.top)+y;
obj.style.zIndex= parseInt(obj.style.zIndex)+z;
}
</script>
</head>
<body>
<h1 ID="heading" STYLE="position:absolute;left:20;top:5">
Controlling Layers with DHTML
</h1>
<div ID="layer1" STYLE="position:absolute;left:20;top:5;width:250;height:150;background-color:yellow">
<h1>First Layer</h1>
This is the first Layer started out on the left side of the page.
</div>
<div ID="layer2" STYLE="position:absolute;left:200;top:50;width:250;height:150;background-color:aqua">
<h1>Second Layer</h1>
This is the Second Layer. It started out on the right side of the page.
</div>
<div ID="control" STYLE="position:absolute;left:20;top:210;width:350;height:255;background-color:violet">
<h1>Control Panel</h1>
<form name="form1">
Use this comntrols to move the layers and other elements on the page.
<br>
<input type="radio" name="what" value="layer1">Layer 1
<input type="radio" name="what" value="layer2">Layer 2
<input type="radio" name="what" value="heading">Heading
<input type="radio" name="what" value="control">This Panel
<br>
<table align="center">
<tr>
<td colspan="2" align="center">
<input type="button" name="up" value="Up" onClick="move(0,-30,0);">
</td>
</tr>
<tr>
<td align="left">
<input type="button" name="left" value="Left" onClick="move(-30,0,0);">
</td>
<td align="right">
<input type="button" name="right" value="Right" onClick="move(30,0,0);">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="down" value="Down" onClick="move(0,30,0);">
</td>
</tr>
</form>
</div>
</table>
</body>
</html>
OUTPUT
No comments:
Post a Comment