2015-02-09 2 views
-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> 
+0

Где функция сброса? Я что-то упускаю? –

+0

Пожалуйста, покажите функцию 'reset', или эта строка отсутствует? – Teemu

+0

Чтобы добавить к отсутствующей функции сброса, вы также закрываете теги (), не открывая их сначала :) –

ответ

0

Ну, в размещенном коде нет формы. Даже если бы было, 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 вместо встроенных обработчиков.

Смежные вопросы