Alex Rivera | Logout

How to overlay images in javascript?

Asked 2010-06-24T14:23:50.717
14

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.

javascript image overlay
Edit
Report

2 Answers

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});
answered 2010-06-24T14:35:42.863
0

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.

answered 2010-06-24T14:29:59.990

Your Answer