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

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 differen开发者_开发技巧t 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)?

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.

CSS3 supports multiple background layers

#example1 {
  width: 500px;
  height: 250px;
  background-image: url(sheep.png), url(betweengrassandsky.png);
  background-position: center bottom, left top;
  background-repeat: no-repeat;
}

I would look into using the <canvas> tag and API's.

It allows you to absolutely position items and images easily, also, if you are using a new browser, you will get the benefit of hardware acceleration, which will speed the whole thing up.

For backwards compatability in IE, you will need to use Google's Explorer Canvas javascript plugin.

Using jQuery animations, you can create "draggable" images. Give your images an onmousedown event that starts a function that moves your image X horizontal and Y vertical pixels based on the current mouse location. Check out this link to look at how to find the mouse location with jQuery. http://docs.jquery.com/Tutorials:Mouse_Position

Or, even better, get the jQuery UI "droppable" plugin that makes it easy to give drag and drop functionality to any element. http://jqueryui.com/demos/droppable/

Using a combination of css properties you can achieve what you're after.

To position the accessories in the correct place you can set the position to absolute and use absolute co-ordinates to specify their position.

To set the order in which they display you can use the z-index property to "stack" them up.

Check out:

http://www.html.net/tutorials/css/lesson15.php

For some detailed info on it.