How to display an image in the right top corner of another

Question

I want to display an image in the right top corner of an another image using java script.

How can I implement that?

I have used the appendChild() method to add the image element to another, but it is not appending.

function appendImage(element, src, alt)   
{    
  var image = new Image();    
  image.src = src;    
  image.alt = alt;    
  element.appendChild(image);    
  return false;    
}

<img border="0" src="www.gravatar.com/avatar/" alt="" width="70" height="70"     
onclick="appendImage(this, 'cancel3.png', 'Picture of foo')";>

What might be the problem?

Answer 1

You can't "append an image to another." It is invalid HTML to put another element inside an image--since the <img> tag cannot have children and it can't have a closing tag, either.

If you want to put one image "on top" of another, replace the original image with a div of the same size, and put both images inside it. You can then absolutely position the second image on top of the first. Here's a modification to your function that will accomplish this:

function overlayImage(element, src, alt) {
   var
      div = document.createElement('div'),
      img = new Image();
   element.parentElement.insertBefore(div, element); // add the div to the parent
   div.style.display = 'inline-block'; // make it behave like an image
   div.style.position = 'relative'; // for absolute position of children
   div.appendChild(element);
   img.src = src;
   img.alt = alt;
   img.style.position = 'absolute';
   img.style.right = 0;
   img.style.top = 0;
   div.appendChild(img);
}

There you go!

See A Live Demo at JsFiddle

What this does is replace your solo <img src="(base)"> tag with the following structure.

<div style="display:inline-block; position:relative;">
   <img src="(base)">
   <img src="(overlay)" style="position:absolute; top:0; right:0;">
</div>

Of course, if you have control over the page it's probably better to create a CSS style you can apply instead of manually styling each element. If you have control over the page and you want to do this for many images, you could also create the above structure ahead of time instead of having to tweak it after page load with javascript.

Answer 2

Is there a reason why you want to use Javascript for this?

You could do it with CSS quite easily:

HTML: 
<img id="image-back" src="image1.jpg"/>
<img id="image-front" src="image2.jpg"/>

CSS:
#image-front{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
}

If the idea is to do some sort of onclick event (like replacing the two images) you can do it like this:

HTML:
<img id="image-front" src="201307251701.PNG" onclick="doStuff()"/>

JavaScript:
function doStuff(){
  window.alert("Stuff done!");
}

Answer 3

You can use a div as a wrapper for both images. One covers the whole div , but the second image is at top right corner of that div , and these two images are siblings, not parent-child.

 function appendImage(element, src, alt) { var image = new Image(); image.src = src; image.alt = alt; image.style.position = "absolute"; image.style.right = 0; element.appendChild(image); return false; } document.getElementById("wrap").onclick = function() { appendImage(this, 'http://placekitten.com/40/40', 'Picture of foo'); }; 

 #wrap { display:inline; position:relative; } 

 Click on the kitty! <div id="wrap"> <img border="1" src="http://placekitten.com/100/100" width="100" height="100"> </div> 

Answer 4

You can't append an image to another image. Use a html structure like this:

<div id="container"
     style="position: relative; width: 70px; height:70px"
     onclick="appendImage(this, 'cancel3.png', 'Picture of foo')">

     <img border="0" src="www.gravatar.com/avatar/" alt="" />

</div>

Answer 5

Javascript? I assume your image id is myImage .

var img = document.getElementById(myImage).style;
img.position = "absolute";
img.top = "0px";
img.right = "0px";