PDA

View Full Version : load stacked images



teknojunkey
02-26-2009, 03:33 PM
Hi
Im trying to stack images (png, or gif's) on top of each other into individual divs on diferent layers positioned with css, however all i can do is replace them with this script.

Is this possible with js and can i load images onChange into empty div's ?

<SCRIPT>
// preload images
var img1 = new Image().src = "/images/jht.gif"
var img2 = new Image().src = "/images/jsht.gif"
var img3 = new Image().src = "/images/pht.gif"

function setImage(imageSelect) {
theImageIndex = imageSelect.options[imageSelect.selectedIndex].value;
if (document.images)
document.images[0].src = eval("img" + theImageIndex);
}
</SCRIPT>

</HEAD><BODY>

<FORM NAME="theForm" METHOD="POST">
<div>Images:
<SELECT NAME="items" onChange="setImage(this)">
<OPTION VALUE="1">Image 1
<OPTION VALUE="2">Image 2
<OPTION VALUE="3">Image 3
</SELECT>
</div>
<div id="far"><IMG SRC = "/images/base_image.gif" ></div>
</FORM>

</BODY>


An example; an image of a tshirt, and you want to add a print to the tshirt to preview what the final product would look like.

thanks