pictures with no background in html, like photoshop layers

I have a picture of a shirt on my html webpage, and what I want is to be able to show a hidden image that is on the shirt by clicking a button, however I want it to become part of the shirt like if it were a hidden photoshop layer s开发者_Python百科o basically with a button click it would cycle through different designs changing on the shirt itself, is there anyway to do that or is the image always going to have a square background?

Thanks,

What about making your 'shirt image' the background of div and inside that div have an img of which you change the src attribute with a simple javascript. Have a look at this idea:

HTML

<div id="shirtimagebackground">
 <img id="overlay" src="overlayX.png"/>
</div>

CSS

 #shirtimagebackground {
  background-image: url(shirt.png);
  width: Xpx;
  height: Ypx;
 }
 #overlay {
  width: 100%;
  height: 100%;
 }

You need to use a combination of javascript, and a absolutly positioned, hidden, image using css.

This image will have to be a .png with apha transparency.

Bear in mind that Internet Explorer 6 does not support transparency, so if this browser is in your target market include a "png fix" like DD_belated.

You can have a see through background with solid images on the top, and place the image over your t-shirt image. However, not all tools allow you to do this (for example, Microsoft's paint does not provide this functionality). One free open source tool that I've used before that has this functionality is Paint.net. Look into "Transparency - Alpha" if you go with that paint program.