圖像作爲一個按鈕 - 點擊時改變圖像

我使用html和非常基本的jQuery的組合來創建一個像按鈕一樣的功能的img，這樣當點擊img時，圖像的src（ src1）更改爲另一個src（src2，即按下的按鈕圖像）。我試圖做到這一點，如果單擊相同的圖像（現在src2），然後它會改回原始的src（src1）。圖像作爲一個按鈕 - 點擊時改變圖像

我希望這不是一個令人頭痛的事情，我可以在需要時澄清。

這裏就是我有下面的代碼：

<!--Html--> 
<body> 
<img id="pixelbutton" src="images/pixelbutton.png" onClick="pixelbuttonclick()" /> 
</body> 

/* jQuery */ 

function pixelbuttonclick() { 
var pixelbutton = document.getElementById("pixelbutton"); 

if (pixelbutton.style.src=="images/pixelbutton.png") { 
    document.getElementById("pixelbutton").src="images/pixelbutton_press.png"; 
    } 


else if (pixelbutton.style.src=="images/pixelbutton_press.png") { 
    document.getElementById("pixelbutton").src="images/pixelbutton.png"; 
    } 

}

我是一個巨大的小白，所以不太複雜的答案，如果可能的話，表示讚賞。

來源

2012-10-17 user1751775

這不是jQuery的。 – SLaks

對不起，我還不太清楚JavaScript和jQuery之間的區別。 – user1751775

我建議放置在頭節的功能一致性，如果你沒有。

你的「pixelbutton.style.src」是錯誤的，因爲src是一個屬性，而不是CSS，但操縱URL是相當困難的。我同意Amareswar在css中使用背景圖片的答案。

另一種方式我這樣做是使用jQuery代碼：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#pixelbutton").click(function(){ 
      $("#pixelbutton").css({'display':'none'}) 
      $("#pixelbutton2").css({'display':'block'}); 
     }) 
     $("#pixelbutton2").click(function(){ 
      $("#pixelbutton2").css({'display':'none'}) 
      $("#pixelbutton").css({'display':'block'}); 
     }) 
    }) 
</script>

和修改你的身體代碼：

<img id="pixelbutton" src="images/pixelbutton.png" /> 
<img id="pixelbutton2" src="images/pixelbutton_press.png" style="display: none;" />

來源

2012-10-17 03:31:07 mline86

相反repalcing URL可以使用與背景圖像的CSS屬性的div和設置的div點擊另一個類與其它圖像作爲背景圖像的

來源

2012-10-17 02:39:34 Amareswar

圖像作爲一個按鈕 - 點擊時改變圖像

回答

相關問題