Is it possible in javascript to superimpose a transparent-background image upon another image? Let's say you have a website with a bunch of product pictures, gizmos and widgets and thingamajigs, and some of these products have been recalled by the manufacturer and upon those images you want to superimpose the Do-Not-Enter sign (circle-with-slash icon) -- in a transparent manner so the original image still shows through. Can that be done? The goal is to not have to edit the images.

Am I going down the right track to put the transparent-background image in a DIV without opacity and to size the transparent-background image and its container DIV according to the size of the original image using clientWidth and clientHeight, and then position the DIV on top of the original image? If the window is resized and the layout changes dynamically, how/when would the superimposed DIV be told to move to the new location of the original image? There's nothing like a LayoutChangedEvent is there? Would the original image's position have to be checked repeatedly using setInterval?

Is it possible in javascript to superimpose a transparent-background image upon another image? Let's say you have a website with a bunch of product pictures, gizmos and widgets and thingamajigs, and some of these products have been recalled by the manufacturer and upon those images you want to superimpose the Do-Not-Enter sign (circle-with-slash icon) -- in a transparent manner so the original image still shows through. Can that be done? The goal is to not have to edit the images.

Am I going down the right track to put the transparent-background image in a DIV without opacity and to size the transparent-background image and its container DIV according to the size of the original image using clientWidth and clientHeight, and then position the DIV on top of the original image? If the window is resized and the layout changes dynamically, how/when would the superimposed DIV be told to move to the new location of the original image? There's nothing like a LayoutChangedEvent is there? Would the original image's position have to be checked repeatedly using setInterval?

• javascript
• image
• transparency
• opacity

1 Answer 1

You don't need Javascript for this, you can easily acplish this with CSS.

The example below is very simple. If you wrap the product image in a container element and set that container to position: relative then you are able to position child elements relative to that container. This way, if the window is resized it doesn't matter.

View a working demo on jsFiddle: http://jsfiddle/VNqSd/2/

HTML

<div class="container">
  <img src="http://nontalk.s3.amazonaws./product.png" 
       width="100" height="100" />
  <img src="http://nontalk.s3.amazonaws./overlay.png" 
       class="overlay" width="100" height="100" />
</div>

CSS

.container {
  position: relative;   
}
.overlay {
  position: absolute;   
  left:0;
  top: 0;
  z-index: 999;
}