В качестве черновика
<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) - только для того, чтобы стрелки сразу работали в демо
