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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    1
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Change two images on same page to a third common image

    Hi,

    Image A and image B are on the same page. I need to put a link on the same page that will change both image A and image B to image C with one click.

    Thanks in advance for your help as usual.

    Steve

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Code:
    <html>
    <head>
    </head>
    <body>
    <img src = "One.gif" id = "one">
    <br>
    <img src = "Two.gif" id = "two">
    <br><br>
    <a href = "#" onclick = "changethem(); return false">Change images</a>
    
    
    <script type = "text/javascript">
    
    function changethem() {
    document.getElementById("one").src ="Three.gif";
    document.getElementById("two").src ="Three.gif";
    }
    
    </script>
    </body>
    
    </html>

    Quizmaster: Which plant is said to deter vampires?
    Contestant: I was going to say garlic, but that's not a plant, is it?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    cruiserart (09-20-2013)

  • #3
    Regular Coder
    Join Date
    Jun 2010
    Posts
    113
    Thanks
    0
    Thanked 2 Times in 2 Posts
    [QUOTE=Philip M;1358092]
    Code:
    <html>
    <head>
    </head>
    <body>
    <img src = "One.gif" id = "one">
    <br>
    <img src = "Two.gif" id = "two">
    <br><br>
    <a href = "#" onclick = "changethem(); return false">Change images</a>
    
    
    <script type = "text/javascript">
    
    function changethem() {
    document.getElementById("one").src ="Three.gif";
    document.getElementById("two").src ="Three.gif";
    }
    
    </script>
    </body>
    
    </html>




    Don't use a onclick attribute inside of a html tag. Set the attribute from within javacript using the .setAttrbute();

    Maybe in this situation it doesn't seem necessary, but it's a good practice to get into to gracefully degrade.
    For more tutorials on my please check out my youtube channel here

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by pdiddles03 View Post

    Don't use a onclick attribute inside of a html tag. Set the attribute from within javacript using the .setAttrbute();

    Maybe in this situation it doesn't seem necessary, but it's a good practice to get into to gracefully degrade.
    pdiddles03 - It's very important that you don't explain to the OP (first post) what you are suggesting; always make sure your response criticizes without offering any specific practical or alternative solution. Above all, avoid posting any helpful code.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Regular Coder
    Join Date
    Jun 2010
    Posts
    113
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Philip M View Post
    pdiddles03 - It's very important that you don't explain to the OP (first post) what you are suggesting; always make sure your response criticizes without offering any specific practical or alternative solution. Above all, avoid posting any helpful code.
    Hmm, how was this not helpful? How am i criticizing you? I'm only offering a better solution. If someone is typing Javascript, they should know what things like HTML Tags and Attributes are.
    For more tutorials on my please check out my youtube channel here

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    It is not necessarily a better solution for a newbie. Internet Explorer 8 and earlier does not support the setAttribute() method. IE8 is still in common use in certain countries. It will remain significant as long as Windows XP is still supported.
    Last edited by Philip M; 09-17-2013 at 05:29 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Regular Coder
    Join Date
    Jun 2010
    Posts
    113
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Philip M View Post
    It is not necessarily a better solution for a newbie. Internet Explorer 8 and earlier does not support the setAttribute() method. IE8 is still in common use in certain countries. It will remain significant as long as Windows XP is still supported.
    It is a better method because it gracefully degrades. If the browser does not support it, the site is supposed to be coded in such a way where it won't matter, hence the term "gracefully degrade"
    For more tutorials on my please check out my youtube channel here

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by pdiddles03 View Post
    It is a better method because it gracefully degrades. If the browser does not support it, the site is supposed to be coded in such a way where it won't matter, hence the term "gracefully degrade"
    There is absolutely no point in making these lofty remarks to a newcomer unless you provide him with the actual code.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Regular Coder
    Join Date
    Jun 2010
    Posts
    113
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Philip M View Post
    There is absolutely no point in making these lofty remarks to a newcomer unless you provide him with the actual code.
    No lofty remarks here. If you have no reason to reply to what i say to help this guy out, why are you even replying to this post? if he wants me to further expand I will, otherwise leave me alone please.
    For more tutorials on my please check out my youtube channel here

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I'm on Philip's side on this one: If you are going to say "always use setAttribute" then you need to also say "but just in case the user's browser doesn't support that then do it this way".

    You can make remarks like that, without the "just in case" to experienced JS users, but not to newbies. They will take your literal word, code it that way, and then have to come back and say "it doesn't work in xxx browser!"

    But on top of that, setAttribute is also the wrong answer, in theory. Because if the element in question already has an onclick handler you need to use addEventListener. And, again, for older MSIE you have to explain that for those browsers you must use attachEvent, and so the whole thing gets more and more and more complex and all the poor newbie wanted in the first place was a simple way to use onclick.

    Philip's first answer was *EXACTLY* what a real newbie needs as a *PRACTICAL* answer that will work for his situation and will work in all browsers. Why complicate things for the poor newbie?
    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:

    Philip M (09-18-2013)

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    CRUISERART: Philip's answer is just fine. Use it.

    But if you really want the correct way to do this, in the VERY UNLIKELY case that your <a> link is already being used for some other purpose, then you *COULD* do it this way:
    Code:
    <html>
    <head>
    </head>
    <body>
    <img src = "One.gif" id = "one">
    <br>
    <img src = "Two.gif" id = "two">
    <br><br>
    <a id="changer" href="#">Change images</a>
    
    
    <script type = "text/javascript">
    var ch = document.getElementById("changer");
    if (ch.addEventListener) {
        ch.addEventListener("click", changeThem, false);
    } else {
        ch.attachEvent ("onclick", changeThem );
    }
    function changethem() {
        document.getElementById("one").src ="Three.gif";
        document.getElementById("two").src ="Three.gif";
        return false;
    }
    </script>
    </body>
    </html>
    You can see how much more ugly and complex that code is. It's "better" in some abstract sense, but who cares? As a practical matter, Philip's answer works just fine.
    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:

    cruiserart (09-20-2013)

  • #12
    Regular Coder
    Join Date
    Jun 2010
    Posts
    113
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Old Pedant View Post
    I'm on Philip's side on this one: If you are going to say "always use setAttribute" then you need to also say "but just in case the user's browser doesn't support that then do it this way".

    You can make remarks like that, without the "just in case" to experienced JS users, but not to newbies. They will take your literal word, code it that way, and then have to come back and say "it doesn't work in xxx browser!"

    But on top of that, setAttribute is also the wrong answer, in theory. Because if the element in question already has an onclick handler you need to use addEventListener. And, again, for older MSIE you have to explain that for those browsers you must use attachEvent, and so the whole thing gets more and more and more complex and all the poor newbie wanted in the first place was a simple way to use onclick.

    Philip's first answer was *EXACTLY* what a real newbie needs as a *PRACTICAL* answer that will work for his situation and will work in all browsers. Why complicate things for the poor newbie?
    Exactly? I highly doubt exactly, teaching them how to do things that are usually taught against today is not a good thing.
    For more tutorials on my please check out my youtube channel here

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Quote Originally Posted by pdiddles03 View Post
    Exactly? I highly doubt exactly, teaching them how to do things that are usually taught against today is not a good thing.
    And Felgall and no doubt others will agree with you.

    And I will, too, *IF* the person is trying to learn how to CODE in JavaScript.

    But if the person is only using JavaScript to make one little thing on his/her site work and has no real interest in learning how to code in JavaScript, who cares?
    It works in all browsers; it's almost surely going to continue to work in all browsers for at least the next 10 years, far beyond the likely life of a newbies web page.

    There's a vast gulf between people who use JavaScript for one or two little thing on a page and don't care about anything else and those who are going to actually sit down and learn how JavaScript and the DOM and CSS and and and all fits together.

    How many newbies will post maybe one or two or three times in this forum and then never appear here again? Likely more than will post 100 times, by far.

    Tailor your answers for the audience: people hacking up one web site who don't really care what they use so long as it works, beginning students who will only ever take one programming course, and students and non-students who are serious about programming. At least three different levels of response are needed, I think.
    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.

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by Old Pedant View Post
    Philip's first answer was *EXACTLY* what a real newbie needs as a *PRACTICAL* answer that will work for his situation and will work in all browsers. Why complicate things for the poor newbie?

    Thank you! It is a pity that some people are so utterly insensitive that they do not realise the level of response required by newcomers, but rather see the issue as an opportunity to demonstrate how fantastically clever they are.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I think what bugged me most was Piddles' airy assurance that setAttribute was the one and only way to go, when in fact it (a) won't work in all browsers and (b) won't work at all if there is already an onclick handler in place (or, more correctly, it will negatively impact same). So in what way, abstract or not, is it better than simply coding the onclick in place? Even from a non-newbie standpoint it was a pointless answer, I thought.

    And his "gracefully degrade" argument is silly. If JavaScript is not enabled in a given browser, the net effect of using the inline onclick vs. using setAttribute (and, indeed, vs. using any means of attaching a handler) is no difference at all: in all cases, nothing happens in the browser, at all, when the link is clicked. "Degrades", yes. "Gracefully"? Not really.
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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