2012-04-23 84 views
0

我想添加一個函數,當客戶點擊小縮略圖時,它會添加一個圖像。看下面的代碼。Onclick Javascript函數添加圖像

<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

謝謝。

回答

1

腳本是做正是你命令它做什麼 - 追加新的圖像傳遞到文檔正文:document.body.appendChild(img);

這字面意思,「追加這個新元素作爲body標籤的孩子「。在</body>之前放置新標籤。如果您想在其他地方添加新圖像,請定位您希望添加的精確位置。

0

此代碼:

document.body.appendChild(img) 

確定其中圖像去。你需要找出哪個元素應該將圖像添加到它並將其放置在那裏。

順便說一下,這種類型的文件操作是非常容易如果您使用JQuery。

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

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