View Full Version : onmouseover with javascript created moving objects

06-08-2007, 12:40 PM
I have no experience with Javascripts or even html coding but in the last week I am reading like mad information about coding on web.
I have managed to progress but I now have a personal page and a javascript inside it which generates some kind of balloons that are moving randomly on my page (similar to the snow algorithm you can fiind on internet).
What I want to do is that when my mouse touches one of these balloons to have an explosion and then have another image replacing the balloon image continuing its trip :-)

The images are defined at the top of the javascript as a string array.
There is a for loop in the javascript which adjusts the coordinates of each of the balloons to take their next position. I thought and tried to use the onmouseover event in that for loop for each document.images[i].src and change the name of the image to another image.

So I did something like
onmouseover="document.images[i].src = 'http://www.myweb.com/newimage.gif'"

but it did not work. Then I used the onmouover property of the current image itself as: (within javascript again)
document.images[i].onMouseOver="document.images[i].src = 'http://www.myweb.com/newimage.gif'"

it did not work either.

Then looking in the internet I thought to do it in the old fashion way editing my html code this time adding this part after the point where I call the javascript, making sure that my javascript creates only one moving balloon:

<a href="http://www.myweb.com/index.html" onMouseOver="document.images[0].src = 'http://www.myweb.com/Images/orangeballoon.gif'"></a>

but it did not work. I tried that one actually to see if the image properties created in Javascript can be passed and controlled from the .html file. It would be nice to comment on that if you want as well.

So my question is simple I suppose. How can I do it? Can I use onmouseover within javascripts? Do I have to define the images in a different way?
In the case of having just one balloon the definition of the location of that balloon is given in the javascript code by:

snow[0] = "http://www.myweb.com/images/blueballoon.gif"

and then there is this document.write which actually defines it I think.

Any ideas?

A third question, does anyone know of a html/javascript debugger that I can use to see what happens? I am having too many problems with the Microsoft debuggers and script editors.

So to summarise: Can I have a onmouseover effect in a javascript and change the image that is moving when the mouse touches it?
If not can I do it from .html and if I can, how do I pass the variables back to html and control the image source from there?
Is there any good debugger?

Thank you all and I appreciate this, apologise for my long message, I was trying to be clear.