Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onclick image hyperlinks

    Im currently putting a website together adn ive come across a problem that im having difficulty solving.

    I've got several images in my gallery page, using the javascript, and the onclick function, I have all images appearing in the center of the page when click.

    I want to use the center image as a hyperlink, going to a different page depending on whick picture is there.

    Im totally inexperienced at javascript, can anybody give me any suggestions?

    Thanks
    Martin

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Could you show us your current code?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <SCRIPT language="JavaScript">
    <!--
    if (document.images)
    {
    Elements_Color= new Image(177,118);
    Elements_Color.src="Website_Files/Images/Web_product_images/Elements_Colour.jpg";

    Drafting_Color= new Image(177,118);
    Drafting_Color.src="Website_Files/Images/Web_product_images/Drafting_Colour.jpg";
    }

    function change1(picName,imgName)
    {
    if (document.images)
    {
    imgOn=eval(imgName + ".src");
    document[picName].src= imgOn;
    }
    }
    //-->
    </script>
    </head>
    <body>

    <img src="Website_Files/Images/Web_product_images/Drafting_B&W.jpg onclick="change1('MainImage','Drafting_Color')" >

    <img src="Website_Files/Images/Web_product_images/Elements_B&W.jpg" onclick="change1('MainImage','Elements_Color')" >

    <IMG SRC="Website_Files/Images/Web_product_images/KSC_Colour.jpg"
    name="MainImage" width="177" height="118" border="0" valign="center" align="center" >

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    • Surround your centered image with <a> tag:
      Code:
      <a href="#">
      <IMG SRC="Website_Files/Images/Web_product_images/KSC_Colour.jpg" 
      name="MainImage" width="177" height="118" border="0" valign="center" align="center">
      </a>
    • Pass the url you want the image be linked to:
      Code:
      <img src="Website_Files/Images/Web_product_images/Drafting_B&W.jpg" onclick="change1('MainImage','Drafting_Color','http://www.google.com')" >
      
      <img src="Website_Files/Images/Web_product_images/Elements_B&W.jpg" onclick="change1('MainImage','Elements_Color','http://www.codingforums.com')" >
    • And modify change1 function into:
      Code:
      function change1(picName,imgName,uri)
      {
      if (document.images)
      {
      imgOn=eval(imgName + ".src");
      document[picName].src= imgOn;
      document[picName].parentNode.setAttribute('href',uri);
      }
      }


    P.S. You have a lot of deprecated attributes, have sometime to make it valid.

    You might also want to make use of document.getElementById in replacement of document[picName].

    Hope that helps.
    Last edited by rangana; 08-19-2008 at 06:36 AM.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much for that, it works perfectly.
    I was along the right lines when i was trying to sort it, but i missed a few key lines out haha, nevermind.

    Thanks again
    Martin


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •