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>

サムネイルの横に追加し続け、顧客がゾーン 1 の見本をクリックしたときなど、指定された場所ではなく、ゾーン 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

このコード:

document.body.appendChild(img)

画像の移動先を決定します。画像を追加する必要がある要素を特定し、代わりにそこに配置する必要があります。

ところで、このタイプのドキュメント操作は、JQuery を使用すると非常に簡単になります。

于 2012-04-23T16:19:16.243 に答える
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 に答える