2011-12-21 58 views
3

我有幾個拇指指甲,我想單擊並在縮略圖上彈出一個較大的版本。我有我使用的代碼和它的作品,如果我把它架在標籤的鏈接,但我似乎無法使thumbanail IMG本身clicable調用img中的onclick?

HTML,鏈接的作品

<li><a href="#" onclick="toggle('widget1')">Toggle</a></li> 

的javaScript

function toggle(id) { 
    var e = document.getElementById(id); 

    if (e.style.display == '') 
    e.style.display = 'none'; 
    else 
    e.style.display = ''; 
} 

HTML圖像我想點擊這裏是我試過的

<div id="wid1"><a href="#" onclick="toggle('widget1')"><img src="widLayOut1.jpg" 
height="200" width="200" /></a></div> 

休息HTML

<div id="widget1" style="display:none"><img src="widget1.jpg" /></div> 
enter code here 

思考

+0

我沒有在HTML中看到ID爲「widget1」的元素。 – 2011-12-21 17:44:54

+0

抱歉,我忘了太補充,當我貼,它現在在那裏 – Overcranked 2011-12-21 17:48:26

+0

你使用什麼瀏覽器? – 2011-12-21 17:57:10

回答

6

您應該能夠單擊事件像任何其他元素添加到您的圖像。首先添加一個ID

<img id="yourImg" src="widLayOut1.jpg" 

然後

document.getElementById("yourImg").addEventListener("click", function(){ 
    alert("You clicked the image"); 
}); 

如果你想支持舊的瀏覽器,當然,你必須做一些更多的工作

var img = document.getElementById("yourImg"); 

if (img.addEventListener) 
    img.addEventListener("click", function(){ 
     alert("You clicked the image"); 
    }); 
else if (img.attachEvent) 
    img.attachEvent("onclick", function(){ 
     alert("You clicked the image"); 
    }); 
else 
    alert("What are you using?!"); 

編輯

我當時想着以上

document.getElementById("yourImg").onclick = function() { 
    alert("You clicked the image"); 
}; 

應該工作得很好。謝謝mplungjan

+1

爲什麼我們不能務實,並做'document.getElementById(「yourImg」)。onclick = function() {}'它適用於IE4以後的所有瀏覽器,或者它可能是NS3,它不喜歡img.onclick – mplungjan 2011-12-21 17:59:29

+2

@mplungjan - 務實很好 - 謝謝,我更新了我的答案。和+1 :) – 2011-12-21 18:01:55