我有一个小需求:我需要通过JavaScript在另一张图片上方添加图像。请给我建议!
function sampleImage()
{
document.getElementById('img1').innerHTML='<img src="C:\Users\rajasekhark\Desktop\assets\images\Cock.png" />';
}
我有一个小需求:我需要通过JavaScript在另一张图片上方添加图像。请给我建议!
function sampleImage()
{
document.getElementById('img1').innerHTML='<img src="C:\Users\rajasekhark\Desktop\assets\images\Cock.png" />';
}
<div>
标签中,并使用以下CSS属性:div {
position: relative;
}
#img2 {
position: absolute;
top: 100px;
left: 100px;
}
top
的值应该是外部图像高度和内部图像高度之差的一半,左侧/宽度同理。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});
<img
style="padding: 20px 7px, background: url('/some/frame.png')"
src="/cock.jpg"
width="50px" height="40px"
/>
您可以使用相对定位。
将图像堆叠在一起,并设置position:relative;top:VALUE;
值应为-背景图像的一半高度-前景图像的一半高度。
另一种方法是将前景图像包装在一个div中,并将背景图像设置为background-image
。
<img src="http://www.deshow.net/d/file/travel/2009-06/germany-landscape-605-2.jpg" /><br /> <img style="position:relative;top:-550;left:490" src="http://www.teezeh.de/wp-content/uploads/2009/06/IE.jpg" />
- Display Name你应该这样做(我看到了 jQuery 标签):
$("#img1 img").first().prop("src", "C:\Users\rajasekhark\Desktop\assets\images\Cock.png");
还有一个建议:不要使用本地磁盘的完整路径...
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();
});