[Dilettante_Pro]

В качестве черновика

<style>
button{
    cursor: pointer;
    text-align: left;
    width:130px;
    height:25px
}
.buttons{
  width: 132px;
  float: left;
}
.active {
  background-color:lightblue;
}

</style>
<div class ="buttons">
   <button  onclick="showImg(0)">first</button>
   <button  onclick="showImg(1)">second</button>
   <button  onclick="showImg(2)">third</button>
</div>
<img id="im" src= "" />
<script>
 var images = ["http://javascript.ru/cat/list/donkey.gif","http://javascript.ru/cat/list/js.gif","http://javascript.ru/cat/list/project.jpg"],
 but = document.getElementsByTagName('button'),
 i = 0;
 but[i].focus();
 but[i].blur();
but[i].classList.add('active');
showImg(i);
  document.onkeydown = function(e) {
      e.preventDefault();
      but[i].classList.remove('active');
      if(e.keyCode == 39 || e.keyCode == 40) { i++; }
      if(e.keyCode == 37 || e.keyCode == 38) { i--; }
      if(i < 0) { i = 2;}
      if(i > 2) { i = 0;}
      but[i].classList.add('active');
      showImg(i); 
  }
function showImg(index) {
   but[i].classList.remove('active');
   im.src = images[index];
   i = index;
   but[i].classList.add('active');
}
</script>

фокусы с фокусом (строки 27-28) - только для того, чтобы стрелки сразу работали в демо