onmouseover usage within javascript

[goutour]

Hello,
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.src and change the name of the image to another image.

So I did something like
onmouseover="document.images.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.onMouseOver="document.images.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.

Rigas

 

[kss444]

On your onmouseover call a javascript fuction that changes the scr of the image tag to your new image.
Debugger I would suggest getting Visual Studio 6 or 2003 or 2005 if this is not possible you might want to try microsoft's free web developer edition.

http://msdn.microsoft.com/vstudio/express/vwd/

Ordinary Programmer

 

[goutour]

So you are advicing me to use the onmouseover event in the for loop, and call another function from within the same javascript to change the .src property of that image if onmouseover is true?

Can I have any control on these images created in the .js at the .html file?

I mean are the document.images properties shared between the .html file and the .js file where the images are actually created?Or do I have to define them in the .html file and then pass them to the javascript?

Thank you for your help, I got lost somewhere.