Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Moving an image

Reply
Thread Tools

Moving an image

 
 
Willem-Jan
Guest
Posts: n/a
 
      08-03-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!
 
Reply With Quote
 
 
 
 
michael elias
Guest
Posts: n/a
 
      08-03-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.

 
Reply With Quote
 
 
 
 
binnyva@gmail.com
Guest
Posts: n/a
 
      08-03-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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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/

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Moving Guide Moving Companies Movers Storage linkswanted ASP .Net 0 01-23-2008 01:08 AM
Free Moving Estimate, Local Movers, Long Distance Moving, PackingSupplies, Storage Rental, Home Moving, Apartment Moving, Office Moving,Commercial Moving linkswanted ASP .Net 0 01-06-2008 04:45 AM
Moving to California Moving to L.A linkswanted Digital Photography 3 01-05-2008 04:22 PM
movers los angeles moving storage services movers in L.A companymoving companies moving in calfornia los angeles linkswanted HTML 0 12-21-2007 10:55 PM



Advertisments