Image Effect Question

[Cheng]

Hi.

Can someone tell how to produce this effect like shown on this Page:

Example Link (http://www.inmagine.com/inmsearch.php?firstview=1&word=asia&match=and&exclude=&exppl=0&vpoint=0&similarmode=&imgtype=0&searchRF=1&searchRM=0&category=all&collection=all&orientation=all&imgperpage=20&sid=&ethc=0)

When pausing with the cursor over the left corner of these images where a magnifiying glass is displayed an popup animation is displayed.
Also I want to have this loading animation.
I think I can do it to have the effect that when pausing over the magnifying glass to show the image but the way I can do it the image then comes up centered on the page and I would like to do it exactly like shown in the example page also with the same loading animation.
I think it's done with javascript, that's why I'm posting here.

Thanks in advance.

Cheng

[jscheuer1]

http://www.dyn-web.com/dhtml/tooltips/tip-txt-img.html

[Cheng]

Hi John.

Thanks for the Link.
As I said, I know how to do these tooltips also with images (see it here (http://www.tommys-service-enterprise.gmxhome.de/Nang%20Paya.htm)) but I would like to have the circle loading animation in right corner like here (http://www.inmagine.com/inmsearch.php?firstview=1&word=asia&match=and&exclude=&exppl=0&vpoint=0&similarmode=&imgtype=0&searchRF=1&searchRM=0&category=all&collection=all&orientation=all&imgperpage=20&sid=&ethc=0).
Do you by chance have a link to a tutorial on how to add this loading animation?
That would be nice.

Thanks again.

Cheng

[jscheuer1]

My connection is so fast and Opera is so good at loading images that I didn't even see it. Thinking it was some IE specific thing, I tried in IE. That slowed it down just enough so I could see what you are talking about. That effect is done by having an animated .gif as the src attribute of the image. Once the 'real image' is available, it replaces the loading image. Actually, this doesn't work in Opera anyway, come to think of it but, should work in FF and IE. All you do is write out your image tag as:


<img id="im1" src="loading.gif">

Then, when it comes time to reveal it and load the other image, just make its style display block or its visibility visible - whatever, and then change its src equal to the 'real' image.

A nice touch is to have preloaded the loading.gif already. Lightbox does this in a way that even works in Opera:

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm