Show "Loading" image onClick JS?

Hi,
I'm trying to make when I clicked an image buton for submit, the same image to change with a gif.
I used:

<form name="form1" method="post" action="starpro.plx" name="seq">
<input name="AT" type="text" size="15" maxlength="15">

<br>
<a href="javascript:document.form1.submit();" title="SEARCH starPRO"><img src="button1.gif" onClick="this.src='button2.gif';" border="0"></a>

<input type="reset" value="CLEAR">
</form>

HTML:

when I first load a page, it is not changing the image and directly send data to with "action".
BUT if I go BACK to the same form page it is working?! So maybe the code should be pre-loaded or something?....

I simply need to show "Loading image" when submit have been clicked.
If you know easy way ajax/JS or something else to do it please share

 

try naming the image and then use 'onClick' within the A tag like this:

<A ....onClick=.........><img id=........></a>?

 

Catch the onSubmit event and call the function to do this. Cut the code and place it in a function. Call the function on submit.

 

can you give me more info, I'm newbie in JS, Thank you very much!!!!!

 

Here you go:

Create 2 images "image1.gif" and "image2.gif"
Use the following or similar HTML (replace the '#' with your link if required):

<a href="#" onClick="theImage.src='image2.gif'"><img id="theImage" src="image1.gif" alt="Image 1" width="200" height="127" border="0" /></a>

Enjoy... Of course, there are many ways to skin a cat!!!