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:

Code:

<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 :

Code:

<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:

Code:

<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

Originally Posted by Soren Twilight

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:

HTML Code:

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

this works very well!

Thread: movable layer script

Thread Tools

Search Thread

movable layer script

Bookmarks

Bookmarks

Posting Permissions