Moving an image

Willem-Jan · Aug 3, 2005

Hi all,

Im trying to move an image by javascript and i created the following code:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

function move()
{
myimg.style.left += 10;
}

</SCRIPT>

</head>

<body>

<img id="myimg" src="dot.gif" height="10" width="10">
<BR>
<a href="#" onclick="move()">Move</a>

</body>
</html>

Can anyone tell me why the image wont move when i use the link and what
i can do to make the image move?

Thanx!

michael elias · Aug 3, 2005

Hi,

Only absolutely and relatively position elements can be positioned
using the left, top, right and bottom style attributes.

<img id="myimg" style="position:absolute; left:20px; top:20px"
src="dot.gif" height="10" width="10"/>

Be aware that positioning an element absolute, it will be relative to
the browser document or to a parent element that has it's position
attribute set to relative.

binnyva · Aug 3, 2005

Hi,

Try the below code...

<html>
<head>
<script language="JavaScript">
function moveImage() {
//Move the image to the new location
document.getElementById("myimg").style.left = 100;
}
</script>
<style type="text/css">
#myimg {
position:absolute;
}
</style>
</head>

<body>
<img id="myimg" src="dot.gif" />

<p> </p>
<p> </p>
<p> </p>

<a href="javascript:moveImage();">Move</a>
</body>
</html>

There are two reasons why your code did not work

1) The position must be given as absolute - you can use
<img id="myimg" src="dot.gif" style="position:absolute;" />
to do it. Otherwise, the image is pretty much stuck where it is.
This change will give that element the ability to move to a new
position
given by absolute x,y co-ordinates.

2) You used
myimg.style.left ...
This is not W3C standard. This will work in most browsers
- but please use the W3C recommended
document.getElementById("myimg").style.left

Hope this helps.

Binny V A
http://www.geocities.com/binnyva/

Image not changing between "mute" & "un-mute" images.	5	Jun 2, 2023
Make 'Image X' spin 360deg on y-Axis until reset button clicked	1	Jan 22, 2023
Help with code	0	Jun 12, 2022
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
Please Help?	0	Jul 23, 2022
Help with my responsive home page	2	Dec 14, 2022
Image shifts to the right when export the page to pdf	4	May 5, 2023
Image upload not working in browser	4	Sep 9, 2022

Moving an image

Willem-Jan

michael elias

binnyva

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads