I have small requirement: I need add image over(up) the another image through javascript. Please give me the suggestion!

function sampleImage()
{     
    document.getElementById('img1').innerHTML='<img src="C:\Users\rajasekhark\Desktop\assets\images\Cock.png" />';
}

I have small requirement: I need add image over(up) the another image through javascript. Please give me the suggestion!

function sampleImage()
{     
    document.getElementById('img1').innerHTML='<img src="C:\Users\rajasekhark\Desktop\assets\images\Cock.png" />';
}

• javascript
• jquery

• Questions generally have a ? in them somewhere. In it's current state, your post is absolutely useless. Add more detail, explain what you actually want to do, and show what you've attempted so far. – Bojangles Commented Aug 29, 2012 at 13:51
• You need to provide a clearer question. Also, you need to accept some of the previous answers (when people see you don't accept answers, they don't feel motivated to help!) – random_user_name Commented Sep 25, 2012 at 12:55

5 Answers 5

You need to enclose the two images in a <div> and then use the following CSS attributes:

div {
    position: relative;
}

​#img2 {
    position: absolute;
    top: 100px;
    left: 100px;
}

See http://jsfiddle/C8hh4/

The second image must be a sibling of the first, it cannot be a descendent because that's not legal HTML. The <div> needs to have relative position otherwise #img2's absolute position will be calculated relative to the closest ancestor that doesn't have the default static position.

The value for top should be half of the difference between the outer image's height and the inner image's height, and likewise for the left / width.

If your content is static, calculate those values by hand. If it's dynamic, use JS to set the style:

var img1 = $('#img1')[0];
var img2 = $('#img2')[0];

var top = 0.5 * (img1.height - img2.height);
var left = 0.5 * (img1.width - img2.width);

$(img2).css({top: top, left: left});

You could use relative positioning. Stack the images on top of each other and set position:relative;top:VALUE; Value should be -HalfHeightOfBackgroundImage-HalfHeightOfForegroundImage.

Another approach whould be wrapping the foreground image in a div and setting the the background image as the background-image.

Why javascript? Of course, you could use a canvas and paint them over each other, but I would remend simple CSS:

<img
  style="padding: 20px 7px, background: url('/some/frame.png')"
  src="/cock.jpg"
  width="50px" height="40px"
/>

You might use a class for that, the inline style is just shorter.

You should do (I saw jquery tag):

$("#img1 img").first().prop("src", "C:\Users\rajasekhark\Desktop\assets\images\Cock.png");

And an advice: DO NOT use full path to your local disk ...

The jQuery option would be

$("#img1").prop("src","blahblah.jpg");

Although I don't really understand your question.

If you mean that you need to change the image on hover then perhaps this will help...

$("#img1").hover(
    function () {
    $(this).prop("src","newImage.jpg");
    }, 
    function () {
    $(this).prop("src","originalImage.jpg");
});

EDIT:

OK... What you need is a div with the green flashcard as the background image. And place the cock image in that div but set to display:none;

Then on hover just show the image of the cock.

$("#containerDiv").hover(
    function () {
    $(this).find("img").show();
    }, 
    function () {
    $(this).find("img").hide();
});