dynamic addition and manipulation of image using javascript

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • pdeb1234
    New Member
    • Oct 2008
    • 3
    #1

    dynamic addition and manipulation of image using javascript

    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>>>>

    Code:
    <html>
<head>
<script type="text/javascript" language="JavaScript">
var timer;
function keyPress( )
{
	var bullet=new Image( );
	var bowser=document.getElementById("Bowser");
	bullet.setAttribute("style","position:absolute;left:0 px;top:0 px;");
	bullet.style.top=bowser.style.top;
	bullet.style.left=bowser.style.left;
	bullet.setAttribute("src","bullet1.jpg");
	document.body.appendChild(bullet);
	fire(bullet);
}

function fire(bullet)
{
	var x=parseInt(bullet.style.left);
	var y=x+8;
	bullet.style.left=y+" px";
	if(x>1024)
	{
		clearTimeout(timer);
		document.body.removeChild(bullet);	
	}
	timer=setTimeout("fire("+bullet+")",50);	
}
</script>
</head>
<body onkeypress="javascript:keyPress( )">
<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" />
</body>
</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
    Last edited by acoder; Oct 6 '08, 10:22 AM. Reason: Added [code] tags
    Tags: None
    • RamananKalirajan
      Contributor
      • Mar 2008
      • 608
      #2
      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.setAttri bute("style","p osition:absolut e;left:0 px;top:0 px;");
      bullet.style.to p=bowser.style. top;
      bullet.style.le ft=bowser.style .left;
      bullet.setAttri bute("src","bul let1.jpg");
      var bulletId = "Bullet"+counte r;
      counter++;
      bullet.setAttri bute("id",bulle tId);
      document.body.a ppendChild(bull et);
      fire(counter);
      }

      function fire(count)
      {
      var objId = "Bullet"+(--count);
      alert(objId);
      var bulet= document.getEle mentById(objId) ;
      var x=parseInt(bule t.style.left);
      var y=x+80;
      bulet.style.cli entX=y+" px";
      if(x>1024)
      {
      clearTimeout(ti mer);
      document.body.r emoveChild(objI d);
      }
      setTimeout("fir e("+counter+")" ,200);
      }

      </script>
      </head>
      <body onkeypress="jav ascript:keyPres s( )">
      <img class="other" id="Bowser" src="Bowser.gif " altText="Bowser " style="position :absolute;top:5 00 px;left:12 px" />
      </body>
      </html>[/HTML]

      Regards
      Ramanan Kalirajan

        Comment

        • pdeb1234
          New Member
          • Oct 2008
          • 3
          #3
          Originally posted by RamananKaliraja n
          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.setAttri bute("style","p osition:absolut e;left:0 px;top:0 px;");
          bullet.style.to p=bowser.style. top;
          bullet.style.le ft=bowser.style .left;
          bullet.setAttri bute("src","bul let1.jpg");
          var bulletId = "Bullet"+counte r;
          counter++;
          bullet.setAttri bute("id",bulle tId);
          document.body.a ppendChild(bull et);
          fire(counter);
          }

          function fire(count)
          {
          var objId = "Bullet"+(--count);
          alert(objId);
          var bulet= document.getEle mentById(objId) ;
          var x=parseInt(bule t.style.left);
          var y=x+80;
          bulet.style.cli entX=y+" px";
          if(x>1024)
          {
          clearTimeout(ti mer);
          document.body.r emoveChild(objI d);
          }
          setTimeout("fir e("+counter+")" ,200);
          }

          </script>
          </head>
          <body onkeypress="jav ascript:keyPres s( )">
          <img class="other" id="Bowser" src="Bowser.gif " altText="Bowser " style="position :absolute;top:5 00 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("fir e("+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.r emoveChild() method.
          however i realise that i can give each bullet a unique id as you have done. Thanks for the suggestion.

          regards
          pdeb1234

            Comment

            • RamananKalirajan
              Contributor
              • Mar 2008
              • 608
              #4
              Originally posted by pdeb1234
              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("fir e("+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.r emoveChild() 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

                Comment

                Previous template Next
                Working...