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 10 of 10
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    32
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Trying to change pic from link with onclick

    I'm having trouble using the onclick. What im trying to do is by clicking a link i want it to change a picture. I've tried using the onclick with the getElementById and i've also tried to send it pack to a function. Also after the link is clicked I need it to change to say view smaller image and I need it to display the smaller one when it is clicked. Would I do this by using the innerHTML? Any help is appreciated thank you.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Chapter 11</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript"> //function isn't active not sure if it works
    var img1 = cottage_small.jpg;
    var img2 = cottage_large.jpg;
    var choice = 1;

    function change(){
    if (choice == 1){
    document.getElementById('pic').src="img2";
    choice = 2;
    }else if(choice == 2){
    document.getElementById('pic').src="img1";
    choice = 1;
    }
    }
    </script>
    </head>
    <body>
    <h1>Pine Knoll Properties</h1>
    <br>
    <h2>Single Family Hours</h2>
    <br>
    <p>Cottage: <b>$149,00</b><br>
    2 bed, i bath, 1,189 square feet, 1.11 acres
    <br>
    <br>
    <a id="large" href="" onclick="document.getElementById('pic').src='cottage_large.jpg';">
    View Larger image</a>
    <br>
    <br>
    <img id="pic" alt="" src="cottage_small.jpg">
    </p>

    </body>
    </html>

    Once again thanks.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Code:
    var img1 = cottage_small.jpg;
    var img2 = cottage_large.jpg;
    should be

    Code:
    var img1 = "cottage_small.jpg";
    var img2 = "cottage_large.jpg";


    Code:
    document.getElementById('pic').src="img2";
    document.getElementById('pic').src="img1";
    should be
    Code:
    document.getElementById('pic').src=img2;
    document.getElementById('pic').src=img1;

  • Users who have thanked DanInMa for this post:

    CodyJava (11-09-2012)

  • #3
    New Coder
    Join Date
    Sep 2012
    Posts
    32
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Thank you do you know how I would change the links. Originally it says larger image and after click i want it to say smaller image. Would I use innerHTML thanks again.

  • #4
    New Coder
    Join Date
    Sep 2012
    Posts
    32
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Update

    I have updated my code but still nothing. Any help is appreciated.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Chapter 11</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    var img1 = "cottage_small.jpg";
    var img2 = "cottage_large.jpg";
    var choice = 1;

    function change(){
    if (choice == 1){
    document.getElementById('pic').src=img2;
    choice = 2;
    }else if(choice == 2){
    document.getElementById('pic').src=img1;
    choice = 1;
    }
    }
    </script>
    </head>
    <body>
    <h1>Pine Knoll Properties</h1>
    <br>
    <h2>Single Family Hours</h2>
    <br>
    <p>Cottage: <b>$149,00</b><br>
    2 bed, i bath, 1,189 square feet, 1.11 acres
    <br>
    <br>
    <a id="large" href="" onclick="change();">
    View Larger image</a>
    <br>
    <br>
    <img id="pic" alt="" src="cottage_small.jpg">
    </p>

    </body>
    </html>

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Code:
    function change(el){
    var myPic = document.getElementById('pic');
    if (choice == 1){
    myPic.src="img2";
    el.innerHTML = "Small"
    choice = 2;
    }else if(choice == 2){
    myPic.src="img1";
    el.innerHTML = "Large"
    choice = 1;
    }
    }
    
    
    <a id="large" href="" onclick="change(this);">
    i think this will do it.

  • Users who have thanked DanInMa for this post:

    CodyJava (11-09-2012)

  • #6
    New Coder
    Join Date
    Sep 2012
    Posts
    32
    Thanks
    25
    Thanked 0 Times in 0 Posts
    I know this is aggravating but here's the code now it's still not working in fact its opening up windows explorer and going to the file when i use IE when I use chrome it just does nothing. Can you explain thanks.


    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Chapter 11</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    var choice = 1;

    function change(el){ //is el element?
    var myPic = document.getElementById('pic');
    if (choice == 1){
    myPic.src=cottage_large.jpg; //do I need to change the id in img to myPic??
    el.innerHTML = "Small"
    choice = 2;
    }else if(choice == 2){
    myPic.src=cottage_small.jpg;
    el.innerHTML = "Large"
    choice = 1;
    }
    }

    </script>
    </head>
    <body>
    <h1>Pine Knoll Properties</h1>
    <br>
    <h2>Single Family Hours</h2>
    <br>
    <p>Cottage: <b>$149,00</b><br>
    2 bed, i bath, 1,189 square feet, 1.11 acres
    <br>
    <br>
    <a id="large" href="" onclick="change(this);">
    View Larger image</a>
    <br>
    <br>
    <img id="pic" alt="" src="cottage_small.jpg">
    </p>

    </body>
    </html>

    Thanks I'm not good at js at all.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,118
    Thanks
    80
    Thanked 4,555 Times in 4,519 Posts
    If you do not return false from the onclick in an <a> tag, then the NORMAL ACTION of the <a> tag *WILL* take place. Meaning that the browser will ask the server for the page specified by the href and load it, wiping out the current page.

    In your <a>, the href is blank, which the browser interprets to mean "this same page". So it *WILL* go back to the server to get this page again, effectively wiping out the change to the image that you made.

    The answer is simple:
    Code:
    <a id="large" href="" 
      onclick="document.getElementById('pic').src='cottage_large.jpg'; return false;">
    (And DanInMa knows that...he just missed it in the code.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    CodyJava (11-09-2012)

  • #8
    New Coder
    Join Date
    Sep 2012
    Posts
    32
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Thanks I think i need to send the onclick back to a function though because I need to use the same <a> tag to change it from 1 picture to the other. Also change the text that the link says. Thats why i was trying to use a function. Doesn't just referencing to the 1 picture when using the onclick bypass all that?

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,118
    Thanks
    80
    Thanked 4,555 Times in 4,519 Posts
    Two ways:

    First:
    Code:
    <a onclick="whatever( ); return false;">...</a>
    Second:
    Code:
    function whatever( ) 
    {
        ... change images, etc. ...
       return false;
    }
    
    and then
    
    <a onclick="return whatever( );">...</a>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    CodyJava (11-10-2012)

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,118
    Thanks
    80
    Thanked 4,555 Times in 4,519 Posts
    The point is that you SOMEHOW want to ensure the onclick returns false. It doesn't matter how.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • The Following 2 Users Say Thank You to Old Pedant For This Useful Post:

    CodyJava (11-10-2012), DanInMa (11-11-2012)


  •  

    Posting Permissions

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