Layering Images & Click to Choose Using Javascript
- by rneal
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!
