Image map with onClick to another image?

[thumpiez]

Hello,

I have a web design question involving images and it has been driving me crazy all day. I'm hoping someone will help me and put me out of my misery :-)

I have an animated image that I made animated out of 5 jpgs:
http://www.ahtwindows.com/purple/img/mainframe.gif

I want the thumbnails to be clickable, which will bring up a different image but appears to bring up the larger image next to the thumbnails. The frames should be rotating automatically until the user clicks a thumbnail, at which point it should pause the automatic rotation, and then go back to animation, if possible.

If this makes any sense at all please, please help me figure out what coding to use...

[rajarajan07]

Which technology you are working? Flash?

[thumpiez]

Not flash. I am basically just using HTML. I have Paintshop Pro & Jasc Animation Shop which helped me create the animated image... but if there is a way to code it using HTML (or CSS or Javascript?) using the still images in each frame, that would be great too.

I'm just stuck because a simple image map wouldn't work right - even though it's animated and each thumbnail is in the same location on each frame - but how can I make an image map do an image swap onClick?

That's why I thought I needed Javascript to do an image swap - but how can I do an image swap onClick when the animated image would have five "image map-type" links associated with those thumbnails in each frame?

Sorry if I am confusing everybody... I'm a little confused myself on what my options are here.

[thumpiez]

Well, I did it. I managed to get this to work.

http://www.ahtwindows.com/purple/index-play2.html

The only thing I haven't been able to do is get that light blue border around the thumbnail after it is clicked.... so I'll be working on that next as another onClick event perhaps?

Thank you!

[rajarajan07]

Well done!!!