I'm an ammature when it comes to webdesigning, I sort of ctrl+c > ctrl+v all of the time trying to learn. At the moment I'm making a webapplication for selecting cushions on a couch. I created a page where you can click on a color to see the cushions in that specific color, but I would like to change the color of the base of the couch also.
In short: I would like to place 2 png images on top of each other and be able to change them individually by clicking on colors.
My code for now:
<body>
<div id="page">
<div id="gallery">
<div id="panel"><img id="largeImage" src="images/image_01_large.png"/>
<div id="thumbs">
<img src="images/image_01_thumb.png" alt="Lime Green"/>
<img src="images/image_02_thumb.png" alt="Burgundy"/>
<img src="images/image_03_thumb.png" alt="Cobalt Blue"/>
</div>
<script>
$('#thumbs').delegate('img', 'click', function () {
$('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#description').html($(this).attr('alt'));
});