0

我正在尝试添加一个功能，当客户单击小缩略图时，它会添加图像。请参阅下面的代码。

<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

谢谢你。

4

3 回答 3

1

该脚本正在执行您指示它执行的操作 - 将新图像附加到文档正文： document.body.appendChild(img);

这字面意思是“将这个新元素作为 body 标签的子元素添加”。这会将新标签放在</body>. 如果您想在别处添加新图像，请定位您想要添加的精确位置。

于 2012-04-23T16:18:35.760 回答
0

尝试这个 ：

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

这个想法是提供必须在函数调用中添加新图像的位置。

于 2012-04-23T16:25:49.013 回答
0

这段代码：

document.body.appendChild(img)

确定图像的去向。您需要确定应该将图像附加到哪个元素并将其放置在那里。

顺便说一句，如果您使用 JQuery ，这种类型的文档操作会非常容易。

于 2012-04-23T16:19:16.243 回答