使用setTimer重設圖像（onclick）

-1

我正在創建一個腳本，當它們被選中時圖像發生了變化，但是，我希望能夠在特定時間間隔後將這些圖像選項重置爲原始圖像。代碼在下面。我有setTimer設置的功能，但我覺得我缺少一條線。使用setTimer重設圖像（onclick）

<!DOCTYPE html> 
<html> 

<head> 
<style> 

h1 { 
position: absolute; 
left: 0px; 
top: 0px; 
} 

h2 { 
position: absolute; 
left: 10px; 
top: 350px; 
} 
h3 { 
position: absolute; 
left: 155px; 
top: 350px; 
} 

h4 { 
position: absolute; 
left: 480px; 
top: 347px; 
} 


h5 { 
position: absolute; 
left: 335px; 
top: 347px; 
} 
h6 { 
position: absolute; 
left: 35px; 
top: 23px; 
} 


h7 { 
position: absolute; 
left: 38px; 
top: 302px; 
} 

h8 { 
position: absolute; 
left: 162px; 
top: 302px; 
} 


h9 { 
position: absolute; 
left: 286px; 
top: 302px; 
} 

h10 { 
position: absolute; 
left: 410px; 
top: 302px; 
} 



h11 { 
position: absolute; 
left: 547px; 
top: 50px; 
} 

h12 { 
position: absolute; 
left: 547px; 
top: 172px; 
} 


</style> 


</head> 

<body> 
<script type="text/javascript"> 
function Reset(form){ 
form.reset(); 
} 
</script> 

<script type="text/javascript"> 
function changeImg(img, newimg) { 
img.src = newimg; 
setTimeout("reset",5000); 

} 
</script> 

<h1> 
<img src="http://i1065.photobucket.com/albums/u385/jfd7851/NMIS-42-UX100-R01-simple%20BACK%20GROUND_zps5sal2wvc.png" border="0" alt=" photo NMIS-42-UX100-R01-simple BACK GROUND_zps5sal2wvc.png"/></a> 
</h1>   

<h2> 
<img src="http://i1065.photobucket.com/albums/u385/jfd7851/LEFT%20NOT%20AVAILABLE_zpsphausbck.png" border="0" alt=" photo LEFT NOT AVAILABLE_zpsphausbck.png" onclick="changeColor(event);"></a> 
</h2> 

<h3><img src="http://i1065.photobucket.com/albums/u385/jfd7851/MANUAL%20NOT%20AVAILABLE_zpshcff1oar.png" border="0" alt=" photo MANUAL NOT AVAILABLE_zpshcff1oar.png"/></a> 
</h3> 

<h4><img src="http://i1065.photobucket.com/albums/u385/jfd7851/RIGHT%20SELECTED_zpsfm5vwnr9.png" border="0" alt=" photo RIGHT SELECTED_zpsfm5vwnr9.png"/></a> 
</h4> 

<h5><img src="http://i1065.photobucket.com/albums/u385/jfd7851/AUTO%20SELECTED_zpsemqkoegv.png" border="0" alt=" photo AUTO SELECTED_zpsemqkoegv.png"/></a> 
</h5> 

<h6><img src="http://i1065.photobucket.com/albums/u385/jfd7851/RIGHT%20LARGE%20MAT_zpsh3uqhrd6.png" border="0" alt=" photo RIGHT LARGE MAT_zpsh3uqhrd6.png"/></a></h6> 

<h7> 
<img onclick="changeImg(this, 'http://i1065.photobucket.com/albums/u385/jfd7851/LEFT%20INSERT%20SELECTED%201_zpse8cn43hf.png')"src="http://i1065.photobucket.com/albums/u385/jfd7851/LEFT%20INSERT%201_zpsoantviyw.png" border="0" alt=" photo LEFT INSERT SELECTED 1_zpse8cn43hf.png"/>"</a></h7> 

<h8><img onclick="changeImg(this, 'http://i1065.photobucket.com/albums/u385/jfd7851/RIGHT%20INSERT%20SELECTED%202_zpsiwxrndok.png')"src="http://i1065.photobucket.com/albums/u385/jfd7851/LEFT%20INSERT%202_zps4eun1ouk.png" border="0" alt=" photo LEFT INSERT SELECTED 1_zpse8cn43hf.png"/></a></h8> 

<h9><img src="http://i1065.photobucket.com/albums/u385/jfd7851/LEFT%20INSERT%203_zpsopq4v1w7.png" border="0" alt=" photo LEFT INSERT 3_zpsopq4v1w7.png"/></a></h9> 

<h10><img src="http://i1065.photobucket.com/albums/u385/jfd7851/LEFT%20INSERT%204_zpsegxrxewq.png" border="0" alt=" photo LEFT INSERT 4_zpsegxrxewq.png"/></a></h10> 


<h11><img src="http://i1065.photobucket.com/albums/u385/jfd7851/RIGHT%20INSERT%206_zpszndwmelo.png" border="0" alt=" photo RIGHT INSERT 6_zpszndwmelo.png"/></a></h11> 

<h12><img src="http://i1065.photobucket.com/albums/u385/jfd7851/RIGHT%20INSERT%205_zpsx6fnngwi.png" border="0" alt=" photo RIGHT INSERT 5_zpsx6fnngwi.png"/></a></h12> 







</p> 
</body> 

</html>

來源

2015-02-09 user3910674

重置功能在哪裏？我錯過了什麼嗎？ – 2015-02-09 14:56:48

請顯示'重置'功能，還是你錯過的那一行？ – Teemu 2015-02-09 14:57:17

要添加到缺少的重置功能，您也關閉標籤（）而不打開它們:) – 2015-02-09 15:01:23

好的，在發佈的代碼中沒有任何表單。即使有，reset()僅重置表單元素的值。無論如何，「重置」一個點擊圖片，你可以做這樣的事情：

function changeImg(img, newimg) { 
    var src = img.src; // Remember the original URL 
    img.src = newimg; 
    setTimeout(function() {img.src = src; /* Reload the original image */}, 5000); 
}

A live demo at jsFiddle。

但是會有一些麻煩，例如，如果用戶在延遲期間點擊圖像，會發生什麼情況。如果你使用a proper method to attach event listeners而不是內聯處理程序，一切都會更容易。

來源

2015-02-09 15:34:51 Teemu

使用setTimer重設圖像（onclick）

回答

相關問題