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

Question

I want to build a website that is a "dress up" game where you can click on different accessories and they will layer on top of each other.

Because it's a little difficult to describe, I found these examples which should hopefully highlight what I am trying to do:

• This is the closest website that I have found, but I can't seem to find the code that is figuring out how the images should lay on top of each other.
• Similar to this iOS princess game

I have hundreds of different accessories as images right now, and (similar to the game above) I need to support being able to choose more than one. So I need a solution that doesn't require me to pre-save an image of every permeation of accessory combinations on top of the princess (as that would be millions of predefined images).

Ideally I would like a Javascript/jQuery or CSS solution but will take any suggestions that people have. Flash suggestions would be helpful as well.

So my questions are:

• How is the example website above lining up all of the images on top of each other? I can't seem to find any CSS or Javascript code that is doing it?
• Are there any suggestions on how to build this type of website (links, tutorials or code examples would be great)?

Answer 1

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.