Layered Images and changing them with Javascript

March 31, 2005 7:30 AM

Does anybody have an easy way in HTML (or CSS) to layer two images on top of each other, while maintaining the ability to switch the bottom image using a javascript event?

I have 20 different colored shirts, and 20 different designs that go on each shirt. Rather than create 400 images, I'd like the ability to have the design on a separate layer from the image of the shirt. When a different color is selected from the dropdown menu, the shirt image (bottom layer) should be able to change to the image of the different shirt without the design image (top layer) needing to change.

I have the javascript working to change the image. It's just a simple document.images.imagename.src = "myimage.jpg" . Can I use this for a table and say document.tablename.bgimage.src = "newimg.jpg" ? Any other ideas?

posted by stovenator to Computers & Internet (7 answers total)

Best answer: The z-index property.
posted by ChasFile at 7:52 AM on March 31, 2005

http://www.bryanbell.com/2005/03/18#a1440 has a great article on using transparent PNG headers in layers. The same basic technique could be used to make the logos work on a variety of different t-shirt colors without anti-aliasing issues.
posted by tumble at 8:08 AM on March 31, 2005

Use a parent DIV with a set height and width and position: relative.. then set the background of that DIV to the primary image. Add a DIV inside this one with a set position: absolute; top: whatever.. left: whatever.. and bob's your proverbial uncle. I use this method all the time.
posted by wackybrit at 8:37 AM on March 31, 2005

CSS Image Slicing. One image loads up, then you move it around relative to the parent container to just show the part you want. More info and (much, much more HTML/CSS resouces) can be found at A List Apart.
posted by caution live frogs at 8:43 AM on March 31, 2005

Response by poster: Chasfile - I think the z-index property may work for me. I'm gonna give it a shot.

tumble - Whether PNG or transparent GIF doesn't make too much of a difference to me, although thinking about anti-aliasing issues is something that I'll have to consider. Also, see my response to wackybrit.

wackybrit - I would definitely use that, but I don't know of a way to change the DIV's background image when the dropdown is changed. Is that possible?

clf - I think that would work, but it doesn't scale well if I need to add more items. If I end up with 40 shirts and 50 designs, I'm going to have to recreate that a bunch of times.
posted by stovenator at 9:50 AM on March 31, 2005

Best answer: Yep, I just put together a tiny demo for you (well, I just adapted a demo I wrote for someone else, but..) here.

The original was a "tooltips over existing image" demo, but I added a button called "Change the background" which changes the background of the main DIV, while keeping the transparent graphics hovering over. Feel free to steal and hack it. It's basic, but works fine in FireFox + Safari.. didn't test IE.

Enjoy!
posted by wackybrit at 1:52 PM on March 31, 2005

Response by poster: wackybrit - After seeing this, I had to go read up on the subject, and I didn't realize how much cross-browser DOM issues there were in order to properly select the div background.

What I ended up doing is creating a div with a fixed width/height, and setting the overflow to visible. Then I set the foreground design to a relative positioned image. I then move the foreground design image back over on top of the tshirt image using top:-160; left:-160; (The dimensions to move the image are actually dynamically generated).

Now I just have to try to change the images to PNG and worry about IE < 5.5+ and Netscape < 6.0 and their ability to use transparent PNGs.
posted by stovenator at 1:27 PM on April 1, 2005