Здравствуйте, 
уважаемые специалисты.
 
 
Скажите, пожалуйста, как правильно отредактировать код, чтобы атрибуты вызванных объектов окончательно менялись после клика? У меня изображение меняется всего на доли секунды - потом возвращается к первоначально заданному. С дефолтным значением из списка - такая же ерунда. В частности, не могу в этом разобраться, а в целом мне нужна ротация нескольких картинок, и соответствующее изменение в форме ниже.
<html>
<head>
</head>
<body>
<form>
  <input type="image" src='images/unit1.gif' id="imgButton" onClick='change()' /><br>                  
//кнопка-изображение
          
          <select name="TypeOfValue" size="1" id="TypeOfValue" >  
//выпадающий список под кнопкой, который тоже 
          <option selected="selected" id="First">First</option>        
//участвует в событии онклик.
          <option id="Second">Second</option>                           
//В списке надо поменять дефолтное значение (с 
          <option id="Third">Third</option>                                 
//первого на третье, например)
          <option id="Fourth">Fourth</option>
        </select>
</form>
<script type="text/javascript">
var knopka = document.getElementById('imgButton');  
//вытаскиваем кнопку-изображение по ID 
var defaultValue = document.getElementById('Third'); 
//вытаскиваем по ID объект option (третью по счёту)
function change () {
	knopka.src = 'images/unit.gif';                     
//меняем атрибут src
	defaultValue.selected='selected';                 
//меняем атрибут selected у третьей опции в выпадающем списке
}
</script>
</body>
</html>