Results 1 to 5 of 5

Thread: onclick change image with url

  1. #1
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default onclick change image with url

    Hello - I'm trying to swap an image when a link is selected; however, I'd like the swapped image to have a link, as well. I've been able to accomplish the image swap like such:

    <script type="text/javascript">
    function changeIt(imageName,objName)
    {
    var obj = document.getElementById(objName);

    var imgTag = "<img src='"+imageName+"' border='0' />";

    obj.innerHTML = imgTag;

    return;
    }
    </script>

    <p><a href="../examples/example.html" target="ExampleIframe"
    onclick="changeIt('../images/logo.gif','image1','http://www.example.com');">
    Example 1</a></p>

    I've defined "image 1" and placed it on the top of my page. My problem is that I want the changed images to have an href, as well. So, I want to click on text "Example 1", have the associated html display in my Iframe, while at the same time, changing an image at the top of my page (not the Iframe) and have that image clickable.
    Any help is greatly appreciated.
    Thanks!

  2. #2
    Join Date
    Aug 2007
    Location
    Somewhere in the vicinity of Betelgeuse
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    But then just add the additional html required to the image and set the iframes src:
    PHP Code:
    <script type="text/javascript">
    function 
    changeIt(imageName,objName,url)
    {
    var 
    obj document.getElementById(objName);

    var 
    imgTag "<a href='" url "'><img src='"+imageName+"' border='0' /></a>";

    obj.innerHTML imgTag;

    document.getElementById("iframe_id").src url;
    return;
    }
    </script> 

  3. #3
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ...and if I wanted the image to link to an external page rather than the iframe?

    Thanks!

  4. #4
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Change this line:
    Code:
    document.getElementById("iframe_id").src = url;
    to this for a popup:
    Code:
    window.open(url);
    and this for the same page:
    Code:
    window.location=url;
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  5. #5
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I see what this does and thanks. Is it possible to have the image clickable but not open the link automatically. I would like to have my page load in the iframe and have an active clickable image at the top of the main page but only have it open if a user clicks on the image.

Bookmarks

Posting Permissions

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