Multi rollover with onclick help please

[13-Dragons]

I am trying to make a new products page for my website. I have a multi image rollover script with a main image and multi thumbnail images that when you rollover the thumnails it change the main image. I want to be able to also click the main image and have a popup window open with whatever image is being shown in main image area, but I can't figure it out. Any help would be great. Also I am using Microsoft Office Live and I can't insert code into the /head section.

<div align="center" style="width: *px; margin-top: 12px; padding: 12px; border: 1px solid #cccccc; margin-left: auto; margin-right: auto;">

<img src="imagemain.jpg" border="0" alt="Click for Full Size" name="swap" style="padding: 12px; border: 1px solid #cccccc; margin-bottom: 4px; width: 100px; height: 100px;"

a href="javascript:popup('yourmenu','yourimage')" onclick="Popup=window.open('Popup','toolbar=yes,
location=no,status=no,menubar=no,scrollbars=no,resizable=no,
width=*,height=*,left=30,top=20'); return false;">
</a>


<br>&laquo;&nbsp;CLICK TO ENLARGE&nbsp;&raquo;<br>

<img src="Firstimage.jpg" alt="" style="margin-top: 4px;" 
onMouseover="document.swap.src='Firstimage.jpg';">&nbsp;

<img src="SecondImage" alt="" style="margin-top: 4px;" 
onMouseover="document.swap.src='Secondimage.jpg';">&nbsp;

<img src="ThirdImage" alt="" style="margin-top: 4px;" 
onMouseover="document.swap.src='ThirdImage';">&nbsp;

<img src="FourthImage" alt="" style="margin-top: 4px;" 
onMouseover="document.swap.src='FourthImage';">&nbsp;


</div>