Please help! some simple javascript

Discussion in 'Web Design and Development' started by Ad Pro, Feb 27, 2008.

  1. Ad Pro macrumors member

    Joined:
    Jul 4, 2007
    Location:
    UK
    #1
    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
     

    Attached Files:

  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Think this is what you're after.

    HTML
    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
    Code:
    var destinations = new Array('a.html', 'b.html');
    function swapImage(image, x)
    {
      document.getElementById('large').href = destinations[x];
      document.getElementById('largeimg').src = "largeimage/"+ image;
    }
     
  3. Ad Pro thread starter macrumors member

    Joined:
    Jul 4, 2007
    Location:
    UK
    #3
    Thank you angelwatt - thats perfect!!:D Really appreciate it!
     

Share This Page