GIF animation sequence 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.