0

我想使用 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')";>

可能是什么问题？

4

5 回答 5

2

您不能“将图像附加到另一个图像”。将另一个元素放入图像中是无效的 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 加载页面后对其进行调整。

于 2013-07-30T05:58:50.790 回答
1

您是否有理由为此使用 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!");
}
于 2013-07-30T06:03:11.563 回答
0

您可以使用 adiv作为两个图像的包装器。一个覆盖整个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>

于 2013-07-30T06:03:36.703 回答
0

您不能将图像附加到另一个图像。使用这样的 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>
于 2013-07-30T06:04:05.360 回答
-1

Javascript？我假设您的图像 ID 是myImage.

var img = document.getElementById(myImage).style;
img.position = "absolute";
img.top = "0px";
img.right = "0px";
于 2013-07-30T05:55:37.310 回答