javascript - How to set up arrow keys to navigate through <img> tags in order? -

I have a "photo gallery" set on my page, where it displays a bunch of thumbnails underneath and users Click the image to see it in main display.

The top / large image is set to:

There is no source to get started with, which is okay because it is overwritten quickly, because I have set an onclick parameter in the tag for each thumbnail:

  & lt; Img onclick = "document.images ['frame1']. Src = '[[image source]'" src = "[// image source]" height = "70px" />  

So basically, if the user clicks on the thumbnail, he will overwrite "frame 1" and display the image there.

This works very well, but it only works by clicking the user - I want to set it up so that they can use the arrow keys - then do not click on each thumbnail. .

What should I include to set some ways to change the display when I press the trapped arrow key? I've got some code that allows me to check that the left or right arrow is pressed, but I do not know how to tie the source for the frame 1, or how it will know which image "Next" is. / P>

Thank you.