Please help! some simple javascript

[Ad Pro]

Hi, i'm hoping this should be fairly simple but I've been trying to do it for a while now and cant seem to get it right. Any help would be much appreciated.

I have created a simple gallery with thumbnails down the right and the enlarged image on the left. The picture displayed changes when you mouse over the thumbnails. For the purpose of this it is just a cyan and magenta square. What i need to happen is when you click on the enlarged blue square it links to page 'a' and when you click on the enlarged magenta square it links to page 'b', I cannot get this to work.

I have included the html, css, and javascript file so please take a look.

thanks in advance for any help

 

[angelwatt]

Think this is what you're after.

HTML

  <div id="main">
    <div id="left">
    <a id="large" href="a.html"><img
    id ="largeimg" src="largeimage/1.jpg" width="340"/></a>   
    </div>
    <div id="right">
      <a href="thumb1.jpg" onmouseover="javascript:swapImage('1.jpg', 0); return false;"><img src="thumb1.jpg"/></a>
      <a href="thumb2.jpg" onmouseover="javascript:swapImage('2.jpg', 1); return false;"><img src="thumb2.jpg"/></a>
    </div>
    <div id="clear"><!-- --></div>
  </div>

JavaScript

var destinations = new Array('a.html', 'b.html');
function swapImage(image, x)
{
  document.getElementById('large').href = destinations[x];
  document.getElementById('largeimg').src = "largeimage/"+ image;
}

 

[Ad Pro]

Thank you angelwatt - thats perfect!! Really appreciate it!