Onclick Javascript函數添加圖像

Question

我試圖添加一個功能，當客戶單擊小縮略圖時，它會添加圖像。 參見下面的代碼。

<html>
<head>

<script type="text/javascript">
<!--

function addimage2() { 
      var img = document.createElement("img");
      img.src = "swatch.jpg"; 
      img.height = 75; 
      img.width = 113;
      img.style.top=800;
      img.style.right=100;
      document.body.appendChild(img);
    }



//-->
</script>
</head>
<body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
       <td width="43%" rowspan="2"><img src="tuffet-diagram.jpg" width="270" height="326"></td>
      <td width="57%" height="162">Zone 1:</td>
   </tr>
  <tr>
      <td>Zone 2: </td>
  </tr>
  <tr>
     <td colspan="2">Zone 1 color:
     <img src="swatch-sm.jpg" alt="swatch-sm" onClick="addimage2();"></td>
  </tr>
  <tr>
     <td colspan="2">Zone 2 color:</td>
  </tr>
</table>
</body>
</html>

它會一直添加到縮略圖旁邊，而不是添加到指定位置，例如當客戶單擊Zone1色板時，它應該添加到Zone 1區域等。

這是我頁面的鏈接： http : //www.manufacturingsolutionscenter.org/salma/tuffet-color.html

謝謝。

Answer 1

該腳本完全按照您的指示執行操作-將新圖像附加到文檔正文中： document.body.appendChild(img);

字面意思是“將該新元素作為body標簽的子元素添加”。 這會將新標簽放在</body>之前。 如果要在其他位置添加新圖像，請定位要添加的確切位置。

Answer 2

這段代碼：

document.body.appendChild(img)

確定圖像的去向。 您需要確定應該將圖像附加到哪個元素上，然后將其放在那里。

順便說一句，如果您使用JQuery，則這種類型的文檔操作非常容易 。

Answer 3

嘗試這個：

function addimage2(where) { 
  var img = document.createElement("img");
  img.src = "swatch.jpg"; 
  img.height = 75; 
  img.width = 113;
  img.style.top=800;
  img.style.right=100;
  where.parentNode.appendChild(img);
}

和

<img src="swatch-sm.jpg" alt="swatch-sm" onClick="addimage2(this);">

想法是提供必須在函數調用中添加新圖像的位置。

Onclick Javascript函數添加圖像

問題描述

3 個解決方案

解決方案1
1 2012-04-23 16:18:35

解決方案2
0 2012-04-23 16:19:16

解決方案3
0 2012-04-23 16:25:49

Onclick Javascript函數添加圖像

問題描述

3 個解決方案

解決方案1 1 2012-04-23 16:18:35

解決方案2 0 2012-04-23 16:19:16

解決方案3 0 2012-04-23 16:25:49

解決方案1
1 2012-04-23 16:18:35

解決方案2
0 2012-04-23 16:19:16

解決方案3
0 2012-04-23 16:25:49