Hi All,

this might be a bit of a newbie question as i've only recently started with Web tech stuff.

I am trying to create some Javascript to move graphical items, currently I have 3 items which I toggle to and use key presses to move.

the thing is, when im setting up the graphic display my graphics seem to be relative even when I set them as absolute.

Im not able to supply a link but here's some snippets of the offending script.

basicaly, Block1 is set correctly at 100,100 from the top left of the screen, However Block2 is then set at an offset from Block1 and block3 at an offset of Block2, so on and so forth.

any ideas how to make all objects offset from the top left the same way block1 does?

Thanks.

Edit: please note that if I move block1 they all move, Block2 causes Block 2+3 to move and block3 can move by it's self, so it's some form if inheritency issue.

<html>
<head>
<script language="JavaScript">

var toggle;

function pagestart()
{
toggle = 0
block1.style.pixelLeft = 100
block1.style.pixelTop = 100
block1.style.zorder = 0

block2.style.pixelLeft = 20
block2.style.pixelTop = 20
block2.style.zorder = 1

block3.style.pixelLeft = 10
block3.style.pixelTop = 10
block3.style.zorder = 2

document.onkeypress=ButtonPressed
}

function ButtonPressed()
{

var a_Pressed=97
var One_pressed=49

if( event.keyCode==One_pressed)
{
toggle++;

if(toggle > 2) toggle=0;
}

if (event.keyCode==a_Pressed)
{
if(toggle == 0)
block1.style.pixelLeft -= 15

if(toggle == 1)
block2.style.pixelLeft -= 10

if(toggle == 2)
block3.style.pixelLeft -= 5
}

</script>
</head>

<body onload = "pagestart()">
<DIV ID="block1" STYLE="position:absolute; width = 16; height = 16"><IMG SRC="blockRed.jpg" BORDER=0>

<DIV ID="block2" STYLE="position:absolute; width = 16; height = 16"><IMG SRC="blockGreen.jpg" BORDER=0>

<DIV ID="block3" STYLE="position:absolute; width = 16; height = 16"><IMG SRC="blockBlue.jpg" BORDER=0>

</body>
</html>

Ignore me, it was a dippy newbie issue.. I neglected to put </div>'s DOH!.