Can you layer pictures on top of each other on a webpage?

The short answer is yes.

There are many ways of handling this. With HTML/CSS you can throw elements on top of each other easily.

HTML:

<img id="imga" src="img1.png"/><img id="imgb" src="img2.png"/><img id="imgc" src="img3.png"/>

CSS:

img{    position:absolute;    top: 0px;    left: 0px;}

So let's take a look at what's important here. You have 3 images in your HTML document (imga, imgb, and imgc). In order to overlay these, you have to first set their position to absolute so that the images will ignore any default layout behaviors. Then, you can use the left and top property to define the x,y coordinates of the img elements, respectively. In the example above, all of the elements are overlayed in the top-left corner of the page. In order control which image ends up on top, you can use the z-index property like so:

#imga{z-index: 10;}#imgb{z-index: 20;}#imgc{z-index: 30;}

This will make imgc appear in front, imgb appear behind imgc, and imga behind everything else. The z-index property assigns which element goes in front of another. The element with the greatest z-index goes on top, followed by the second greatest and so on.

For your project, we can slightly tweak the code above:

HTML

<img id="layer1" src="img1.png"/><img id="layer2" src="img2.png"/><img id="layer3" src="img3.png"/>

CSS

img{position:absolute;top: 0px;left: 0px;}#layer1{   z-index: 10;}#layer2{z-index: 20;}#layer3{z-index: 30;}

Since you now understand what lies where, you know that layer3 is on top (accessories layer), layer2 is in the middle (your person). and layer1 is on the bottom (the background). Then you can create accessories like so:

<img src="accessory1.png" onClick="setAccessory('accessory1.png');"/>

And then using javascript, you can set the first layer's src equal to the clicked accessory's.

function setAccessory(path){     document.getElementById('layer1').src = path;     //if you're using jQuery, $("#layer1").attr("src", path);}

You can create as many accessories as you want. Say you want to add more accessories on top of your person, then you can easily create more layers, assign their z-indexes (and even do this dynamically using javascript, how exciting!)

In conclusion, I hope you found this little tutorial useful. For your purposes, I suggest taking a look at jQuery as well as the element. They will be fun to use and certainly help your application.

Good Luck with your application.

You will have to use a combination of position:absolute with top and left positions defined, as well as z-indexes to control which items appear on top.

If you are looking for a solution that requires less code, try this:

1. Create your art in photoshop, with each accessory on a different layer
2. Save each layer as a separate image. Make sure to make all images the full canvas size, and use transparency. Save as PNG-24. This way, the position of each accessory will be "hardcoded" in the images, so you don't have to handle it in code.
3. Create a container <div>, and give it position: relative;.
4. Put all the images inside that <div>, as <img> tags, in the correct order (stack the layers, the background image being the first one)
5. Apply position: absolute; on every <img>.

This should get you started. Then use jQuery to toggle each image as the buttons representing them are clicked.