Move Layers Example

Move Layer right
Move Layer down
Reset Layer

This is a layer called "layer1"

This example shows how to move layers around with javascript. Click on the links to move the layer down and right by 25pixels.

Source for movelayer.html:

<html>
<head>
<title>Move Layers Example</title>
</head>
<SCRIPT LANGUAGE="JAVASCRIPT">

n = (document.layers) ? 1:0;
ie = (document.all) ? 1:0;

function moveleft() {
    if (n) document.layer1.left += 25;
    if (ie) layer1.style.posLeft += 25; 
}
function movedown() {
    if (n) document.layer1.top += 25;
    if (ie) layer1.style.posTop += 25; 
}
function reset() {
    if (n) document.layer1.left = 100;
    if (ie) layer1.style.posLeft = 100; 
    if (n) document.layer1.top = 100;
    if (ie) layer1.style.posTop = 100; 
}

</SCRIPT>
<body bgcolor=white text=black>
<A HREF="#" onClick="moveleft()">Move Layer right</A><BR>
<A HREF="#" onClick="movedown()">Move Layer down</A><BR>
<A HREF="#" onClick="reset()">Reset Layer</A><BR>
<DIV ID="layer1" STYLE="position:absolute; top:100; left:100; z-index:1; 
background-color:#cccccc; layer-background-color: #cccccc">
This is a layer called "layer1"<BR>
</DIV>
</body>
</html>

Back