By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,136 Members | 1,087 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,136 IT Pros & Developers. It's quick & easy.

dynamic addition and manipulation of image using javascript

P: 3
i am trying to dynamically load the image of a bullet and then manipulate it using a looping function( with setTimeout() and clearTimeout() methods).
here's the code>>>>

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript" language="JavaScript">
  4. var timer;
  5. function keyPress( )
  6. {
  7.     var bullet=new Image( );
  8.     var bowser=document.getElementById("Bowser");
  9.     bullet.setAttribute("style","position:absolute;left:0 px;top:0 px;");
  10.     bullet.style.top=bowser.style.top;
  11.     bullet.style.left=bowser.style.left;
  12.     bullet.setAttribute("src","bullet1.jpg");
  13.     document.body.appendChild(bullet);
  14.     fire(bullet);
  15. }
  16.  
  17. function fire(bullet)
  18. {
  19.     var x=parseInt(bullet.style.left);
  20.     var y=x+8;
  21.     bullet.style.left=y+" px";
  22.     if(x>1024)
  23.     {
  24.         clearTimeout(timer);
  25.         document.body.removeChild(bullet);    
  26.     }
  27.     timer=setTimeout("fire("+bullet+")",50);    
  28. }
  29. </script>
  30. </head>
  31. <body onkeypress="javascript:keyPress( )">
  32. <img class="other" id="Bowser" src="D:\Documents and Settings\Administrator\My Documents\My Pictures\Images\mario\Bowser.gif" altText="Bowser" style="position:absolute;top:500 px;left:12 px" />
  33. </body>
  34. </html>
the script loads the image alright but gives an error soon after.

OS: Windows XP Pro and IE 7
lang: JavaScript
error code: code 0
message: 'object' is undefined
line: line 1 char 1
Oct 6 '08 #1
Share this Question
Share on Google+
3 Replies


RamananKalirajan
100+
P: 607
Can u please explain ur requirement a little bit more. I worked with ur code & i found the problem, the element "Bullet" u used in the fire function is a problem. I replaced with some other method and find the code was running but the fire function was called infinitely. Can u please tell what do u want to do or what are u trying to do.

The following code was the one i tried.
[HTML]<html>
<head>
<script type="text/javascript">
var timer;
var counter=0;
function keyPress( )
{
var bullet=new Image( );
var bowser=document.getElementById("Bowser");
bullet.setAttribute("style","position:absolute;lef t:0 px;top:0 px;");
bullet.style.top=bowser.style.top;
bullet.style.left=bowser.style.left;
bullet.setAttribute("src","bullet1.jpg");
var bulletId = "Bullet"+counter;
counter++;
bullet.setAttribute("id",bulletId);
document.body.appendChild(bullet);
fire(counter);
}

function fire(count)
{
var objId = "Bullet"+(--count);
alert(objId);
var bulet= document.getElementById(objId);
var x=parseInt(bulet.style.left);
var y=x+80;
bulet.style.clientX=y+" px";
if(x>1024)
{
clearTimeout(timer);
document.body.removeChild(objId);
}
setTimeout("fire("+counter+")",200);
}

</script>
</head>
<body onkeypress="javascript:keyPress( )">
<img class="other" id="Bowser" src="Bowser.gif" altText="Bowser" style="position:absolute;top:500 px;left:12 px" />
</body>
</html>[/HTML]

Regards
Ramanan Kalirajan
Oct 6 '08 #2

P: 3
Can u please explain ur requirement a little bit more. I worked with ur code & i found the problem, the element "Bullet" u used in the fire function is a problem. I replaced with some other method and find the code was running but the fire function was called infinitely. Can u please tell what do u want to do or what are u trying to do.

The following code was the one i tried.
[HTML]<html>
<head>
<script type="text/javascript">
var timer;
var counter=0;
function keyPress( )
{
var bullet=new Image( );
var bowser=document.getElementById("Bowser");
bullet.setAttribute("style","position:absolute;lef t:0 px;top:0 px;");
bullet.style.top=bowser.style.top;
bullet.style.left=bowser.style.left;
bullet.setAttribute("src","bullet1.jpg");
var bulletId = "Bullet"+counter;
counter++;
bullet.setAttribute("id",bulletId);
document.body.appendChild(bullet);
fire(counter);
}

function fire(count)
{
var objId = "Bullet"+(--count);
alert(objId);
var bulet= document.getElementById(objId);
var x=parseInt(bulet.style.left);
var y=x+80;
bulet.style.clientX=y+" px";
if(x>1024)
{
clearTimeout(timer);
document.body.removeChild(objId);
}
setTimeout("fire("+counter+")",200);
}

</script>
</head>
<body onkeypress="javascript:keyPress( )">
<img class="other" id="Bowser" src="Bowser.gif" altText="Bowser" style="position:absolute;top:500 px;left:12 px" />
</body>
</html>[/HTML]

Regards
Ramanan Kalirajan

what i am trying to do is to make my character "Bowser" fire bullets on pressing a key. the fire function mimics a thread. the bullet image should load dynamically and will be moved horizontally across the screen after loading.
note that i can do this by adding a few html <img/> tags with width and height set to 0. but if i want rapid firing of an unknown number of bullets i must load them dynamically the reason i am calling setTimeout("fire("+bullet+")",50)
is that a bullet must continue moving till it reaches the other or right end of the screen. Once there, it will be removed by document.body.removeChild() method.
however i realise that i can give each bullet a unique id as you have done. Thanks for the suggestion.

regards
pdeb1234
Oct 6 '08 #3

RamananKalirajan
100+
P: 607
what i am trying to do is to make my character "Bowser" fire bullets on pressing a key. the fire function mimics a thread. the bullet image should load dynamically and will be moved horizontally across the screen after loading.
note that i can do this by adding a few html <img/> tags with width and height set to 0. but if i want rapid firing of an unknown number of bullets i must load them dynamically the reason i am calling setTimeout("fire("+bullet+")",50)
is that a bullet must continue moving till it reaches the other or right end of the screen. Once there, it will be removed by document.body.removeChild() method.
however i realise that i can give each bullet a unique id as you have done. Thanks for the suggestion.

regards
pdeb1234

Hi Pdeb1234,
this is my suggestion not the final solution or something. Why dont u use an object with marquee. once the bullet reaches from left to right it can be stopped. The object can be cloned as per the keypress this is a suggestion.


Regards
Ramanan Kalirajan
Oct 6 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.