Member Avatar for kracko 
<input type="button" onclick="move()" value="go" />
<br />
<img src="btn16.gif" style="height:100px; width:100px; top:0px" id="img" />
<script>
var k=0;
function move(){
var t=document.getElementById("img").style.top;
t=parseInt(t);
t+=15;
document.getElementById("img").style.top=t;
if(k<10){
k++;
setTimeout("move()",1);
}
}
</script>
  • 3 Contributors
  • 5 Replies
  • 113 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by kracko

Recommended Answers

All 5 Replies

Member Avatar for kracko

yeah and please if you figure it out correct it so that it works in firefox as well..cause i really have troubles with that browser=\

Member Avatar for fxm

Tha basic problem is that for the image to be movable the style position:relative; must be present.

This little toy

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <title></title>
  </head>
  <body>
    <img style="position:relative; left:0px" onclick="this.style.left=60+parseInt(this.style.left)+'px'" 
	src="btn16.gif">
  </body>
</html>

works in Firefox,Chrome,Opera,Safari(pc) and IE8.

A bullet-proof cross-browser version of your button-driven code is a bit more complex.

Edited by fxm because: n/a
Member Avatar for kracko

aw well 'position:absolute' or relative was what i forgot to put. It now works in IE and Opera..but Firefox still stubborn=\
I want the picture to roll down on click not to just change it's place when clicked..that's why wrote with function=\

Member Avatar for Taywin 
document.getElementById("img").style.top=t;

The problem is the code line above. For firefix, it must be...

document.getElementById("img").style.top=t+"px";
Member Avatar for kracko

thanks Taywin..it finally worked. Can't believe that was the problem=\

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.