So I'm making a gallery of fabrics and backgrounds for letters for a fraternity/sorority store in my college's town. If you don't know what I'm talking about, this is a fabric letter. You can see how it has a white outline (background) and a red inside (foreground). WELL, I want to make it so you can change both the foreground and background, simply by clicking it's similar image.

This is what I have so far

<script type="text/javascript">// <![CDATA[
function changeImage(filename)
{
document.mainimage.src = filename;
}// ]]></script>

with these for each fabrics:

<a href="javascript:changeImage('/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/37.jpg')">
<img src="/wp-content/themes/collegiateconnectionbg/images/fabrics/foregrounds/37.jpg"
alt="" width="100px" height="50px" /></a>

I really like how this works, but it's only good for one layer. Is there anyway I can add a layer below it, but still make it show at the top of the page? I know I'll have to use photoshop and transparency for both options, thats no problem, but I wanted to make sure I can do this before I start creating 600+ images.

I know I can play with z-index and css, but since I'm using wordpress the one example I read about here wasn't working or I didn't completely understand it, and messed up my entire page.

Also here's my tester webpage to see the current code in work. (if you click the navy&white stars image, you can see a very rough makeshift "A")

Thanks in advance!