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

Expand|Select|Wrap|Line Numbers

 <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

Oct 6 '08 #1

Subscribe Post Reply

2171

RamananKalirajan

608

512MB

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

pdeb1234

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

608

512MB

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

by: Dante | last post by:

My company stores thousands of images in a SQL 200 database (image datatype). We have a need to manipulate these images as they are presented according to different situations. For example -...

Microsoft SQL Server

Gmail - dynamic Add Attachment - Reverse Engineering

by: JavaScriptRocks | last post by:

I've been trying to imitate / reverse engineer the add attachment feature in gmail composer. I managed to do it to say about 80% but its giving me trouble in IE on WinXP-Sp2. I am using PHP to do...

Javascript

How to do rollover with dynamic text?

by: JOSEPHINE ALVAREZ | last post by:

I have this code that I want to use to do a rollover. However, because the company I am doing it for is continually changing the text, I want to be able to use dynamic text to change the text on...

Javascript

image manipulation in asp/aps.net ??

by: Job | last post by:

Hi, I would like to find out what ASP/ASP.net can do with image manipulation. Does ASP have built in functions (eg. after upload to server) to manipulate images, like rotate, scale, crop etc.?...

ASP.NET

Image manipulation in js

by: zacariaz | last post by:

I dont know, and i dont much like javascript, however, i am told that the only way to do want i want to do, is with javascript, so here goes. zoom and cut is the only features i need. 1. the...

Javascript

Image colour manipulation using JS

by: Pulzar | last post by:

Hi there, I want to show a simple image on a web page, and allow the viewer to select and change one of the colours used in the image, and immediately preview the result. I'd like to keep the...

Javascript

Dynamic Image Map Not Updating in Firefox

by: avicalc | last post by:

I am using HTML checkboxes and JavaScript to toggle on and off, a number of absolutely positioned transparent images located on directly top of each other with different z-indexes. In addition, all...

Javascript

Dynamic Content in High-Traffic Sites

by: pbd22 | last post by:

Hi. This is just a disaster management question. I am using XMLHTTP for the dynamic loading of content in a very crucial area of my web site. Same as an IFrame, but using XMLHTTP and a DIV. I...

Javascript

Problem facing while Dynamic Image Creation to replace Font Embedding

by: neovantage | last post by:

Hey all, I am using a PHP script which creates headings at run time in a sense at page execution. I am stuck a with a very little problem which i am sure i will have the solution from experts. ...

PHP

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

dynamic addition and manipulation of image using javascript

Similar topics