如何使用javascript在另一个图像上添加图像

Question

我的要求很小：我需要通过javascript将图像添加到（上）另一个图像上。请给我一个建议！

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

Answer 1

为什么选择javascript？当然，您可以使用画布并将它们相互涂抹，但我建议使用简单的CSS：

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

你可以使用一个类，内联样式只是更短。

Answer 2

您可以使用相对定位。 将图像堆叠在一起并设置position:relative;top:VALUE; 值应为-HalfHeightOfBackgroundImage-HalfHeightOfForegroundImage。

另一种方法是将前景图像包裹在div中，并将背景图像设置为background-image。

Answer 3

您需要将这两个图像括在<div>中，然后使用以下CSS属性：

div {
    position: relative;
}

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

请参阅http://jsfiddle.net/C8hh4/

第二张图片必须是第一张图片的兄弟，它不能是后代，因为这不是合法的HTML。 <div>需要relative位置，否则#img2的绝对位置将相对于不具有默认{{1}的最近祖先进行计算位置。

static的值应该是外部图像高度和内部图像高度之差的一半，同样适用于左侧/宽度。

如果您的内容是静态的，请手动计算这些值。如果它是动态的，请使用JS设置样式：

top

Answer 4

你应该这样做（我看过jquery标签）：

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

并建议：不要使用本地磁盘的完整路径......

Answer 5

jQuery选项将是

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

虽然我不太明白你的问题。

如果你的意思是你需要在悬停时更改图像，那么这可能会有所帮助......

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

编辑：

OK ... 你需要的是一个以绿色闪卡作为背景图片的div。并将公鸡图像放在该div中但设置为display：none;

然后在悬停时只显示公鸡的图像。

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