D4mations.com

JavaScript beginner tutorial 25 – changing an image source



In this tutorial I show you how to change images in JavaScript changing the value of the “src” property.

Don’t forget to subscribe:
http://www.youtube.com/user/QuentinWatt

For collaborations and business inquiries, please contact via Channel Pages: http://ChannelPages.com/QuentinWatt Social links:
————————————————————-
Add me on twitter:

facebook group:
https://www.facebook.com/quentin.watt
————————————————————-

Original source

d4mer

, , , , , , , , , , , , ,

37 responses to “JavaScript beginner tutorial 25 – changing an image source”

  1. Hi Quentin,
    I want to feature "a picture of the day" on a website from either a folder containing those images or a website/tumblr account.
    Could you please tell, step by step how to do it?

    Thanks man!

  10. what if you have multiple images ?? and can you explain more about the need of image_tracker variable? I failed to understand the need of it, can't feel it.

  13. nicely explained, i wanted to make a simple program to display an image gallery which will be re usable for all my projects. before i could even finish the video it was vividly clear as to what i need to do. in less than 10 minutes i had it all sorted out after months and months not developing it because most people show it looking all complex. i am your new subscriber!

  15. Could someone please tell me what is wrong with my code. I copied it exactly from the video, but the change() function refuses to work. Just the facebook logo pops up on the screen, but when I click on it nothing happens. Here's my code:

    <!DOCTYPE html>
    <html lang = "en">
    <head>
    <meta charset = "utf-8" />
    <title>Document</title>
    <script type = "text/javascript">

    var image_tracker = "f";
    function change(){
    var image = getElementById('social');
    if(image_tracker == 'f'){
    image.src = 'twitter.png';
    image_tracker = "t";
    }else{
    image.src = 'facebook.png';
    image_tracker = "f";
    }
    }

    </script>
    </head>
    <body>
    <img src = "facebook.png" alt = "social logo" id = "social" onclick = "change();">
    </body>
    </html>

  18. Would it also work if the function was written like this? If you were trying to change the image back and forth…

    function change (); {
    var image = document.getElementsById('social');
    image.src = "twitter.png"
    if (image.src = "twitter.png") {
    var image2 = document.getElementsById('social');
    onclick = "image.src = image2"
    }
    }

    OR THIS

    function change (); {
    var image = document.getElementsById('social');
    image.src = "twitter.png"
    if (image.src = "twitter.png") {
    var image2 = document.getElementsById('social');
    onclick = "image.src = <img src = "facebook.png" alt = "social logo" alt = "social logo id = "social" onclick = "change();">"
    }
    }

  19. i have taken your pattern and made a gallery, ty for the video mate, you are great teacher, i newbie front end and you are helping me alot with these videos! here is my version (i know my version is retarded way of making gallery but there it is);

    var image_tracker = "f"
    function change() {
    var image = document.getElementById('social');
    if (image_tracker === "f") {
    image.src = "gallery/s1.jpg";
    image_tracker = "t";

    } else if (image_tracker === "t") {
    image.src = "gallery/s2.jpg";
    image_tracker = "g";

    } else if (image_tracker === "g") {
    image.src = "gallery/s3.jpg";
    image_tracker = "h";
    } else if (image_tracker === "h") {
    image.src = "gallery/s4.jpg";
    image_tracker = "z"

    } else if (image_tracker === "z") {
    image.src = "gallery/s5.jpg";
    image_tracker = "something else"
    } else {
    image.src = "gallery/s1.jpg"
    image_tracker = "f"
    }

    };

  21. Hey, I guess this can be used to make a gallery with previews and then have an image that changes to each preview when clicked, but that's a lot of duplicated code. Is kavascript the best to handle this, or is there a simpler way. Thanks for the video!

  25. !!!!!!_____ For 3 or more `

    var image_track = "a";
    function change(){
    var image = document.getElementById("social");
    if(image_track == "a"){
    image.src = "number2.jpg";
    image_track = "b";
    }else if (image_track == "b"){
    image.src = "number3.jpg";
    image_track = "c";
    }
    else {
    image.src = "number1.jpg";
    image_track = "a";
    }
    }
    ————
    this is HTML code
    <body>
    <img src="number1.jpg" id="social" onclick="change();"/>
    </body>

  26. in this tutorial what is happening is that when we click on a image it slides to the next image.
    Can we create a hyperlink on a small part of our image and when we click on that part then only it will slide to the next image.

  29. One little thing about this exercise: For me– it takes two clicks for the first transition to occur. After that, it will change with every click. If I reload the page, I have to begin again with two clicks to get JS going. Any suggestions?

  32. hello
    thanks for your help.
    can I have the ability to save the last image after refresh?

    i am making an interactive page for public to report street light faults,
    I want the user to have the ability to change the status of lighting pole (on and off) by clicking on the image.
    then when I open the page, i get the last image selected by the user.
    can you help me with this?

Leave a Reply