[英]How to display an image in the right top corner of another
我想使用java脚本在另一个图像的右上角显示图像。
我该如何实现呢?
我已经使用appendChild()
方法将图像元素添加到另一个,但它没有附加。
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')";>
可能是什么问题?
你不能“将图像附加到另一个图像上”。 将另一个元素放入图像中是无效的HTML - 因为<img>
标记不能有子元素,也不能有结束标记。
如果要将一个图像放在另一个图像的“顶部”上,请用相同大小的div
替换原始图像,并将两个图像放在其中。 然后,您可以将第二个图像绝对放在第一个图像的顶部。 这是对您的功能的修改,将实现此目的:
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);
}
你去!
这样做是用以下结构替换你的solo <img src="(base)">
标签。
<div style="display:inline-block; position:relative;">
<img src="(base)">
<img src="(overlay)" style="position:absolute; top:0; right:0;">
</div>
当然,如果您可以控制页面,那么创建CSS样式可能更好,您可以应用而不是手动设置每个元素的样式。 如果您可以控制页面并且想要对许多图像执行此操作,则还可以提前创建上述结构,而不必在使用javascript加载页面后进行调整。
你有没有想要使用Javascript的原因?
您可以很容易地使用CSS:
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;
}
如果想要做某种onclick事件(比如替换两个图像),你可以这样做:
HTML:
<img id="image-front" src="201307251701.PNG" onclick="doStuff()"/>
JavaScript:
function doStuff(){
window.alert("Stuff done!");
}
您可以使用div
作为两个图像的包装器。 一个覆盖整个div
,但第二个图像位于该div
右上角,这两个图像是兄弟姐妹,而不是亲子。
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>
您无法将图像附加到其他图像。 使用这样的html结构:
<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>
JavaScript的? 我假设您的图片ID是myImage
。
var img = document.getElementById(myImage).style;
img.position = "absolute";
img.top = "0px";
img.right = "0px";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.