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 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Defining the "active" image src. in Javascript?

    Hi all,
    I have an <img> place holder in my HTML, and when users 'onclick' different button's, a javascript function is called that makes different images appear within the <img> place holder. ie. the src changes. See below:

    Code:
    <body>
    <img id="image_space" src="" />
    
    <button type="button" onclick="imageChange(/image1.jpg)">Image 1</button>
    <button type="button" onclick="imageChange(/image2.jpg)">Image 2</button>
    
    <script>
    function imageChange(image){
    document.getElementById("image_space").src=image;
    }
    </script>
    </body>
    Strait forward enough. I also have a third button, which activates a different javascript function to display an image within a different <img> place holder. BUT, I only want this button to work IF "/image2.jpg" is the ACTIVE image within the original <img> place holder (with id="image_space").
    How can I write some javascript code that will identify that image as being ACTIVE? The final code with the missing "link" is described below:

    [CODE]
    Code:
    <body>
    <img id="image_space" src="" />
    <img id="image_space2" src="" />
    
    <button type="button" onclick="imageChange(/image1.jpg)">Image 1</button>
    <button type="button" onclick="imageChange(/image2.jpg)">Image 2</button>
    <button type="button" onclick="thirdImageChange(/image3.jpg)">Image 3</button>
    
    <script>
    function imageChange(image){
    document.getElementById("image_space").src=image;
    }
    
    function thirdImageChange(thirdImage){
    if (missing code here that says "/image2.jpg ACTIVE in <img id="image_space">)
    {
    document.getElementById("image_space2").src=thirdImage;
    }
    }
    </script>
    </body>
    Sorry it's so long winded! I hope I made it clear enough. Your help would be GREATLY appreciated. Thanks for reading!

  • #2
    Regular Coder nomanic's Avatar
    Join Date
    Feb 2009
    Location
    United Kingdom
    Posts
    255
    Thanks
    9
    Thanked 33 Times in 33 Posts

    Netscape

    how about something like this?

    Code:
    <body>
    <img id="image_space" src="" />
    <img id="image_space2" src="" />
    
    <button type="button" onclick="imageChange(1)">Image 1</button>
    <button type="button" onclick="imageChange(2)">Image 2</button>
    <button type="button" onclick="thirdImageChange(1)">Image 3</button>
    
    <script>
    var cimg=0;
    
    function imageChange(i){
    document.getElementById("image_space").src=((i==1)?'image1.jpg':'image2.jpg');
    cimg=i;
    };
    
    function thirdImageChange(thirdImage){
    if (cimg==1) {document.getElementById("image_space2").src='image3.jpg';}
    };
    </script>
    </body>

  • Users who have thanked nomanic for this post:

    shauntho (07-22-2011)

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    YES!!! Thankyou soooooo much!, worked a treat!!


  •  

    Posting Permissions

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