PDA

View Full Version : movable layer script



Soren Twilight
06-15-2006, 03:50 PM
can someone please design a script for me that can move an object about a page. for example...

you click a button that says 'move right' and a layer moves 50 pizels right. you click it again and the layer once again moves 50 pixels right. the layer would be a picture (myimage.gif)

is this possible?

shachi
06-15-2006, 04:29 PM
here take a look at this:



<html>
<head>
<script type="text/javascript">
function moveright(id, amount){
var el = document.getElementById(id);
var cp = el.offsetLeft;
el.style.left = cp - amount + "px";
}
function moveleft(id, amount){
var el = document.getElementById(id);
var cp = el.offsetLeft;
el.style.left = cp + amount + "px";
}
function moveup(id, amount){
var el = document.getElementById(id);
var cp = el.offsetTop;
el.style.top = cp - amount + "px";
}
function movedown(id, amount){
var el = document.getElementById(id);
var cp = el.offsetTop;
el.style.top = cp + amount + "px";
}
</script>
</head>
<body>
<div id="yourimage" style="width: 100px;height: 100px;position:absolute;background-color: red;top:100px;"></div>
<input type="button" onclick="moveright('yourimage', 50);" value="Move Right">
<input type="button" onclick="moveleft('yourimage', 50);" value="Move Left">
<input type="button" onclick="moveup('yourimage', 50);" value="Move Up">
<input type="button" onclick="movedown('yourimage', 50);" value="Move Down">
</body>
</html>

Soren Twilight
06-17-2006, 02:09 PM
yes this works but how do i insert MY image if my image name is broomani.gif

shachi
06-17-2006, 03:43 PM
Change the :
<div id="yourimage" style="width: 100px;height: 100px;position:absolute;background-color: red;top:100px;"></div>

to
<img src="broomani.gif" border="0" id="your_id"/>

and the :


<input type="button" onclick="moveright('yourimage', 50);" value="Move Right">
<input type="button" onclick="moveleft('yourimage', 50);" value="Move Left">
<input type="button" onclick="moveup('yourimage', 50);" value="Move Up">
<input type="button" onclick="movedown('yourimage', 50);" value="Move Down">



to:


<input type="button" onclick="moveright('your_id', 50);" value="Move Right">
<input type="button" onclick="moveleft('your_id', 50);" value="Move Left">
<input type="button" onclick="moveup('your_id', 50);" value="Move Up">
<input type="button" onclick="movedown('your_id', 50);" value="Move Down">


Note: The part in red can be changed according to your settings.

Soren Twilight
06-29-2006, 05:44 PM
thanks but this doesn't work. I tried your suggestion and many variations but i can't get it to work. If I try your suggestion the picture is inserted but it won't move.

shachi
06-30-2006, 06:38 PM
By the way can you post your code after the modifications??

mddubois
02-26-2007, 11:55 AM
thanks but this doesn't work. I tried your suggestion and many variations but i can't get it to work. If I try your suggestion the picture is inserted but it won't move.

Some trouble? Put your *.gif into div container:


<div style="background-color: white;"><img src="sometrouble.gif"></img></div>

this works very well!:)