GIF animation with last image frame being random

- Desperately looking for sample code or help creating code for the following series of action:

- Click the image (or could click a separate button/image) to begin the animation of an image immediately followed by the appearance of a random image to the right of the last frame in the animation.

- We think we need a gif* image file (on left side of the page, 7-frames of animation) to run after being clicked followed immediately by an image appearing to the right of it. The image on the right will appear to be created by the activity in the left image. The image on the right needs to be randomly selected from a list of images. This will create the effect of the gif on the left “randomly” generating a different image each time it is clicked.

- We are using iWeb to build the site. We need help figuring out how to accomplish this. We have iWeb SEO to enable us to place code in the head tag. We can add an HTML snippet---but, haven’t had success in making this work.


*NOTE: We are open to other forms of creating the animation effect---perhaps it could be done via a javascript function instead. Or, should this series of activities all exist within one big animation? (If so, how do we accomplish the random image at the end?)

THANKS SO MUCH for any help/advice!
Here’s a code of a table to hold the two images (including one FAILED attempt at some coding):

<table width="770" height="579">
<tr>
<td width="403" height="579">
<img src="christmas_sweater_GENERATOR_files/christmas-sweater-generator-static.gif" alt="" onclick='javascript:(this.src=="christmas-sweater-generator-static.gif"?this.src="christmas_sweater_GENERATOR_files/christmas-sweater-generator-animation.gif":"")'; "function random_imglink()" />
</td>

<td width="367" height="579" td id="output"></td>
</tr>
</table>
Here’s a picture, in case that helps.

--
Freedom is the right of all sentient beings...

Hi duckinator,

I'd forget about animated GIFs, and use JavaScript's setInterval() function to trigger the various images:

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

You can use the src property to swap out an image for another one, eg:

document.getElementById('myImage').src = "newimage.jpg";

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/