teknojunkey Posted February 24, 2009 Share Posted February 24, 2009 Hi Im trying to stack images on top of each other with a dropdown list, however all i can do is replace them. Is this possible with js and can i load them 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> Quote Link to comment Share on other sites More sharing options...
Psycho Posted February 24, 2009 Share Posted February 24, 2009 Yes, you can stack images on top of each other, you would use layers in CSS, but why? If the images aren't transparent so you can see through them, then you can only see the top image (or at worst you would see edges of the lower images sticking out from the top). It would be simpler to just swap out the image on the top. If it is an issue of a time delay to display the changed image, then just load all the images and change the display properties. Can you give a little more explanation as to what you are trying to acheive and the problem with the code you posted above? Quote Link to comment Share on other sites More sharing options...
teknojunkey Posted February 24, 2009 Author Share Posted February 24, 2009 I want to create a preview of what a t-shirt would look like with a print on it. so you have an image .. a red t-shirt say and then you can add a design over it, a gif or png (im not interested in IE) I was thinking of doing this in flash, but js seemed to be simpler :s ! the code i added replaces the image on selecting an item from the dropdown, but i want them on top of each other. Idealy loaded in another div, then i can control the position and depth with css. thanks Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted February 24, 2009 Share Posted February 24, 2009 I want to create a preview of what a t-shirt would look like with a print on it. so you have an image .. a red t-shirt say and then you can add a design over it, a gif or png (im not interested in IE) I was thinking of doing this in flash, but js seemed to be simpler :s ! the code i added replaces the image on selecting an item from the dropdown, but i want them on top of each other. Idealy loaded in another div, then i can control the position and depth with css. thanks Hmm... how are the shirts themselves loaded? Because IMO the simplest solution (without knowing how the rest of your system works) would be to set the shirt image as the background image for the element, then have the shirt design/logo that's selected by the dropdown fill the content of that element. Since the shirt image is set as the background, you should get your overlay effect. Quote Link to comment Share on other sites More sharing options...
teknojunkey Posted February 24, 2009 Author Share Posted February 24, 2009 the tshirts are loaded from a db, so theres not much chance of adding them to the background image. I would also like to add more than one image to the images stack, eg. print, buttons, logo so i have to load an image into a specific div on the page. any thoughts? thanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.