show/ hide stuff help needed

I have this:

<a href="javascript:ajaxpage('http://www.mysite.com', 'contentarea');">
<img class="thumbnail" src="image.jpg" width="500" onmouseover="this.src='inprogress.gif';" />
</a>
<div id="contentarea"></div>

Code (markup):

This code will display an image and, when clicked, it will load an URL in the "contentarea" div and replace the image with a "loading" image. This part works great BUT I need to make that loading image disappear in 5 seconds and get back the original image.

Basically this is what I need:
- image displayed
- when clicked, a "loading" image is displayed over/instead of the standard image for 5 seconds, after the 5 seconds I need my original image back
- also, when clicked, I should be able to keep the javascript:ajaxpage('http://www.mysite.com', 'contentarea');" part.

Any idea on how I can do that?

 

use setTimeout

 

I am not sure how..

 

http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

 

Uhm... it seems that I am unable to make it work...

 

I have a question. Why you won't change it at the end of the AJAX request? Why after 5 seconds? I think it can confuse the user. Because user may think that request is done after 5 seconds, but probably isn't...

 

When they click the image I am loading an URL that processes something. In about 5 seconds the processing is done. That's why I need a 5 sec image rollover.

 

try this if you have asynchronous ajax:

<script type="text/javascript">
function loadLateImg(){
    window.setTimeout("document.images['img'].src='image2.jpg'",5000)
}
</script>
<a href="javascript:ajaxpage('http://www.mysite.com', 'contentarea');loadLateImg();">
<img id="img" class="thumbnail" src="image.jpg" width="500" onmouseover="this.src='inprogress.gif';" />
</a>
<div id="contentarea"></div>

Code (markup):

 

That worked. Thanks!

 

Great! You are welcome!