How to overlay images in javascript?

Question

I need to solve the following problem.

I have two (or more) .PNG images of the same dimensions. Each PNG image is created with transparent background color.

I need to display img1 and upon it img2, so in places where img2 has trancparent color, img1 will be seen.

For example: img1 upper part filled with transparent color and a cow on down part. img2 upper part contains clouds and downpart filled with transparent color.

I want to combine these two images and see clouds above the cow.

I understand that I need to use some filter when displaying both images, but not sure which one and what parameters of it to use.

Answer 1

Something like this should work (using just HTML/CSS):

HTML:

<div class="imageWrapper">
  <img class="overlayImage" src="cow.png">
  <img class="overlayImage" src="clouds.png">
  <img class="overlayImage" src="downpart.png">
</div>

CSS:

.imageWrapper {
  position: relative;
}
.overlayImage {
  position: absolute;
  top: 0;
  left: 0;
}

Keep in mind that IE6 does not handle transparency in PNGs very well. If you need it to work in IE6, you will need to apply the filters you mentioned. This procedure is detailed here.