Onclick從一個圖像切換到另一個圖像然後回到一個

試圖找出如何從一個圖像切換到兩個圖像，然後返回到一個onlick。Onclick從一個圖像切換到另一個圖像然後回到一個

到目前爲止，我有以下這些作品用於切換到一個圖像，並返回到原始圖像沒有問題。最終，我試圖將第一個onclick事件垂直放置爲兩個圖像，然後再次單擊返回到第一個單個圖像。

var play = false; 
    function toggle() { 
     var image = document.getElementById('image') 
     var scan = document.getElementById('scan'); 
     play = !play; 
     if (play) { 
      image.src = "pause.png";image.width="182";image.height="182";image.border="0"; 
      scan.play(); 
     } 
     else { 
      image.src = "play.png";image.width="182";image.height="182";image.border="0"; 
      scan.pause(); 
     } 
    }

和身體：

<a href="javascript:void(0)"><img onclick="toggle()" id="image" src="play.png" alt="image" width="182" height="182" style="margin:auto; position:absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0;"></a>

來源

2012-08-12 sixin

這應該工作，除了罰款，取出從JavaScript的寬度，高度和邊界，他們沒有改變，爲什麼有它存在的風險和一些瀏覽器嚇到他們了？

我只是把這個一起真正的快速測試和它的工作原理治療。我已經註釋掉當然scan.play和停頓，但我假設你已經檢查控制檯在瀏覽器中看到，如果這些拋出任何錯誤？

我把<a>出來，用風格cursor=pointer代替的可點擊的元素以及..這樣的作品無論是但這是整潔和IE6的作品，我認爲，IE7 +肯定。

edit: removed source block didn't achieve goal of question

在評論討論後有辦法做到這一點亂堆，我可能會使用jQuery但既然你不在這裏，是一個不

<!doctype html> 
<html> 
<head> 
    <script type="text/javascript"> 
     var play = true; 
     function toggle() { 
      //var scan = document.getElementById('scan'); 
      var playpause = document.getElementById('playpause'); 
      var btnplay = playpause.getElementsByClassName('play'); 
      var btnpause = playpause.getElementsByClassName('pause'); 
      play = !play; 
      if (play) { 
       btnplay[0].className = 'btn play active'; 
       btnpause[0].className = 'btn pause'; 
       //scan.play(); 
      } 
      else { 
       btnplay[0].className = 'btn play'; 
       btnpause[0].className = 'btn pause active'; 
       //scan.pause(); 
      } 
     } 
    </script> 

    <style> 
     .btn { 
      width: 182px; 
      height: 182px; 
      cursor: pointer; 
      position: absolute; 
      visibility: hidden; 
     } 
     .btn.active { visibility: visible; } 
     .btn.play { background: url('play.png') no-repeat 0 0; } 
     .btn.pause { 
      background: url('pause.png') no-repeat 0 0; 
      padding: 182px 0 0 0; 
     } 
    </style> 
</head> 
<body> 
    <div id="playpause"> 
     <div class="btn play active" onclick="toggle()"> 
     </div> 
     <div class="btn pause" onclick="toggle()"> 
      <img src="other.png" alt="other" /> 
     </div> 
</body> 
</html>

來源

2012-08-12 00:19:09

我沒有得到任何錯誤我發佈了代碼，因爲它按預期工作，在onclick上將一個圖像切換爲另一個圖像。如果音頻ID（播放）標籤正在播放，則掃描是用於掃描。我試圖讓它顯示兩個圖像來顯示onclick（例如，pause.png + another.png），然後再點擊返回到單個play.png。 – sixin 2012-08-12 00:34:40

好酷...有幾種方法可以做到這一點，但我會更新我的答案，以顯示一種快速簡便的方法來預先加載圖像，您甚至可以在以後添加效果 – 2012-08-12 00:36:56

感謝光標=指針樣式提示。我是新來的，正在尋找一種方法來擺脫狀態欄中顯示的「javascript：void（0）」，並且這樣做有訣竅。 – sixin 2012-08-12 00:51:22

Onclick從一個圖像切換到另一個圖像然後回到一個

回答

相關問題