如何在另一個的右上角顯示圖像

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);
}

你去！

請參閱JsFiddle的現場演示

這樣做是用以下結構替換你的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加載頁面后進行調整。

Answer 2

你有沒有想要使用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!");
}

Answer 3

您可以使用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> 

Answer 4

您無法將圖像附加到其他圖像。 使用這樣的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>

Answer 5

JavaScript的？ 我假設您的圖片ID是myImage 。

var img = document.getElementById(myImage).style;
img.position = "absolute";
img.top = "0px";
img.right = "0px";