如何在另一个图像的右上角显示图像
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);
}
给你!
观看JsFiddle的现场演示
这样做的目的是用以下结构替换您的单独<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!");
}
不能将一个图像附加到另一个图像。使用这样的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>
您可以使用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>
Javascript?我想你的图片id是myImage
。
var img = document.getElementById(myImage).style;
img.position = "absolute";
img.top = "0px";
img.right = "0px";
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 角度:在ng重复上切换图像
- 画廊图像未显示
- Phonegap-(安卓/iphone)多个图像的图像库出现问题
- Javascript排序的图像弹出窗口..可以't单独弹出
- 画布数据到图像
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 使图像在单击时展开到不大于浏览器
- Html页面上的多个Base64图像和平滑加载
- UIAutomation放大图像
- 使用javascript在Flash中加载外部图像
- 可以在这里为背景图像设置滤镜吗
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 如何在图像右上角显示删除按钮
- 如何通过单击浏览器右上角的图像来启用/禁用自定义 chrome 扩展程序
- 在右上角显示一个小图像
- 如何在另一个图像的右上角显示图像
- 定位关闭按钮在右上角的弹出图像