If the only thing changing on the selections are borders, then you should really only need one array - the one holding the urls of the large images. If basic old html square colored borders are good enough, then that's all you actually need. If they aren't, then efficiency requires some extra information, along the the lines of Are all the button the same size, and is the selected, hover and unselected border the same on all of them?
Assuming that square colored backgrounds are good enough, I'd store *only* the value of the currently selected button, and use some html trickery to handle mouseovers entirely separately. By having a border div, then another div of the exact same size and position inside of it, you can use the outer level for selected/deselected, and use the inner for hovering. The trick is to make the outer the color for selected/unselected, and the inner opaque and colored when mouseovered and transparent when not. Saves you the trouble of having to keep track of mouseovers, and making comparisons to the currently selected button when changing back.
For example (excuse the inline stylesheet and javascript), with 3 buttons, each image 50x50 with a 2 pixel border:
Code:
<div id='ButtonOuter1' class='ButtonOuter'>
<div id='ButtonInner1' class='ButtonInner' onmouseover='MousedOver(1)' onmouseout='MousedOut(1)' onClick='Select(1)'>
<img src='URLtoImage1' class='ButtonImage'>
</div>
</div>
<div id='ButtonOuter2' class='ButtonOuter'>
<div id='ButtonInner2' class='ButtonInner' onmouseover='MousedOver(2)' onmouseout='MousedOut(2)' onClick='Select(2)'>
<img src='URLtoImage1' class='ButtonImage'>
</div>
</div>
<div id='ButtonOuter3' class='ButtonOuter'>
<div id='ButtonInner3' class='ButtonInner' onmouseover='MousedOver(3)' onmouseout='MousedOut(3)' onClick='Select(3)'>
<img src='URLtoImage1' class='ButtonImage'>
</div>
</div>
<img id='BigImage' src='DefaultImage' onClick='nextBigImage()'>
<style>
.ButtonOuter {width: 54px; height: 54px; position: relative; background-color: black;}
.ButtonInner {width: 54px; height: 54px; position: absolute; top: 0px; left: 0px; background-color: transparent;}
.ButtonImage {width: 50px; height: 50px; position: absolute; top: 2px; left: 2px;}
</style>
<script>
var SelectedImage = 1;
var BigImages = new Array();
BigImages[1] = "URLofBigImage1";
BigImages[2] = "URLofBigImage2";
BigImages[3] = "URLofBigImage3";
var NumberofImages = 3;
function MousedOver(index)
{
document.getElementById("ButtonInner" + index).style.backgroundColor = 'blue';
}
function MousedOut(index)
{
document.getElementById("ButtonInner" + index).style.backgroundColor = 'transparent';
}
function Select(index)
{
document.getElementById("ButtonOuter" + SelectedImage).style.backgroundColor = 'black';
document.getElementById("ButtonOuter" + index).style.backgroundColor = 'gray';
document.getElementById("BigImage").src = BigImages[index];
SelectedImage = index;
}
function nextBigImage()
{
var new = SelectedImage + 1;
if (new > NumberofImages)
{new = 1;}
Select(new);
}
</script>
Explanations: As mentioned, we use a transparent or blue div to function as a mousedover border(or not). We only keep track of the currently selected image, and when a new one is changed the current one's selected/unselected color is changed back to normal, the new one is changed to active, the image changes and we update which one is selected. On clicking the big image, it adds one to the current index, rolls back around to 1 if it's at the end, then acts like you clicked that image.
If you need image borders, then it's a bit more complicated. If you have different sized images, it's more complicated. If your borders are different for each image, then it's a bunch more complicated. But if not, this should work after the appropriate cleanup to fit in your page.
Facebook
Twitter