3

我有一个小要求：我需要通过 javascript 在另一个图像上添加图像。请给我建议！

一只鸡

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

5 回答 5

2

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

div {
    position: relative;
}

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

见http://jsfiddle.net/C8hh4/

第二个图像必须是第一个图像的兄弟，它不能是后代，因为那不是合法的 HTML。<div>需要有relativeposition的#img2绝对位置将相对于没有默认static位置的最近祖先计算。

的值top应该是外部图像高度和内部图像高度之间差异的一半，左侧/宽度也是如此。

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

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});
于 2012-08-29T13:53:50.437 回答
1

为什么是 JavaScript？当然，您可以使用画布并将它们相互绘制，但我建议使用简单的 CSS：

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

您可以为此使用一个类，内联样式更短。

于 2012-08-29T13:52:40.307 回答
1

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

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

于 2012-08-29T13:53:42.667 回答
0

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

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

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

于 2012-08-29T13:51:25.663 回答
-1

jQuery 选项将是

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

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

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

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

编辑：

好的...您需要的是一个以绿色抽认卡为背景图像的 div。并将公鸡图像放在该 div 中，但设置为 display:none;

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

$("#containerDiv").hover(
    function () {
    $(this).find("img").show();
    }, 
    function () {
    $(this).find("img").hide();
});
于 2012-08-29T13:50:41.327 回答