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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I make my Image Changer clickable?

    I'm using a script on my site and it works great - however, upon the image changing to the next one, I would like them to be taken to a site when they click on it. So far, I only get them to go to one site per main pic.

    Here's some of the script I use (I'm not js savvy at all, just muddling through):
    ===========================================
    <head>

    <script>
    function changeImage1(Furniture)
    {
    document.Furniture.src = Furniture;
    }

    function changeImage2(Lamps)
    {
    document.Lamps.src = Lamps;
    }
    </script>
    </head>
    --------------------------------------------------------------------
    <body>
    <a
    href="javascript:changeImage1('http://retro-modern.net/images/HomePage/FU-1.jpg')">
    <font color="#008080">Furniture
    1</font></a></td>
    <td width="14%" align="center">
    <a href="javascript:changeImage1('http://retro-modern.net/images/HomePage/FU-2.jpg')">
    <font color="#008080">Furniture 2</font></a>
    ---------------------------------------------------------------------------
    <p align="center"><a href="http://retro-modern.net/furniture.html">
    <img name="Furniture"
    src="http://retro-modern.net/images/HomePage/FU-1.jpg"
    width="520" height="76" border="0"></a></p>
    ====================================================
    etc. etc.

    I have not a clue how to make my pic "FU-2.jpg" go to www.mysite/mysite.com.

    Can any one give me a suggestion?

    Thanks a bunch,

    Aussy (new but learning)

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Please rty the following

    PHP Code:
    <HTML>
    <
    HEAD>
    <
    TITLE>Document Title</TITLE>

    <
    script type="text/javascript">
    <!--
    function 
    changeImage(pic,loc){
    document.Furniture.src pic;
    document.getElementById("link1").href=loc
    }
    //-->
    </script>

    <style>
    a{
    color:#008080;
    }
    </style>

    </HEAD>
    <BODY>


    <a href="#null" onclick="changeImage('http://retro-modern.net/images/HomePage/FU-1.jpg','http://retro-modern.net/furniture.html')">Furniture</a><BR>

    <a href="#null" onclick="changeImage('http://retro-modern.net/images/HomePage/FU-2.jpg','http://retro-modern.net/lamps.html')">Lamps</a>

    <p align="center">

    <a id="link1" href="#null">
    <img name="Furniture" src="http://retro-modern.net/images/HomePage/FU-1.jpg" width="520" height="76" border="0">
    </a>
    </p>

    </BODY>
    </HTML> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    document.links ....

    First of all to make it easier to access the link you want to change through javascript, set the name property to something meaningful.

    <p align="center"><a name="linkFurniture" href="http://retro-modern.net/furniture.html">
    <img name="Furniture"
    src="http://retro-modern.net/images/HomePage/FU-1.jpg"
    width="520" height="76" border="0"></a></p>

    Next you can access the links through the document.links[].href property, either using a number or name e.g.

    document.links[0].href or
    document.links['link name'].href


    So in your case change the script to something like:

    <script>
    function changeImage1(Furniture)
    {
    document.Furniture.src = Furniture;
    document.links['myanchor'].href = "http://furniture1...."
    }

    function changeImage2(Lamps)
    {
    document.Lamps.src = Lamps;
    document.links['myanchor'].href = "http://furniture2...."

    }
    </script>


  •  

    Posting Permissions

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