How to overlay images in javascript?

Question

Hello!

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

You don't need to use any sort of filter (except in IE6).

You can simply place to <img> elements on top of each-other, using CSS position: absolute to make both elements occupy the same area.

In IE6, you'll need an AlphaImageLoader filter simply to display the PNGs with transparency

Answer 2

You can try setting their .style.position to "absolute", give them the same coordinates with left and top (or right or bottom), and then change their z-index. Although it's quite dirty, and maybe it doesn't work well with your page, but I can't think of another solution.

Answer 3

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.

Answer 4

If you are using jquery try this in any browser

<script>
$(function () {
    var position = $("#i1").offset();
    $('#i2').css({ position:'absolute', top:position.top, left: position.left});
});
</script>
<img id='i1' src='images/zap_ring.png' />
<img id='i2' src='images/zap_ring_hover.png' />

and adjust top & left values

$('#i2').css({ position:'absolute', top:position.top-10, left: position.left+5});