javascript - 如何在另一个图像的右上角显示图像

Question

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

可能是什么问题？

Answer 1

您不能“将图像附加到另一个”。将另一个元素放入图像中是无效的 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);
}

给你!

See A Live Demo at 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 对其进行调整。