dynamically created overlapping images...

Verdagon

Hey everyone,

I'm trying to be able to overlap a lot of images on top of eachother, but HTML doesn't quite allow for that. I thought image maps did, but it turns out they don't either.

For example, I want a jpeg at 10,10,300,300, another jpeg at 20,20,500,500, and then maybe another one at 10, 100, 400, 400... maybe even up to 100 of them, dynamically positioned, overlapping one another. I need them to be positioned that way, is there any way to do that?

I know HTML, PHP, and quite a bit of CSS, so if there's any way to do it with those that would be great. If not, I can survive a venture into javascript... can someone point me in the right direction?

Thanks,

bpat1434

Each image has an ID, that ID is a CSS construct. You give each ID a z-index value from 1 - 100 and then put your images down in your HTML. a simple example:

<html>
<head>
</head>
<body>

<img src="image1.jpg" id="img1" />
<img src="image2.jpg" id="img2" />
<img src="image3.jpg" id="img3" />

</body>
</html>

The CSS would then set a z-index for each image (positioned absolutely) which would create the layering effect:

#img1 { position: absolute; top: 0; left: 0; z-index: 1; }
#img2 { position: absolute; top: 10px; left: 10px; z-index: 2; }
#img3 { position: absolute; top: 20px; left: 20px; z-index: 3; }

You could use something along those lines to do what you want.