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:
Tweets by QuentinWatt
facebook group:
https://www.facebook.com/quentin.watt
————————————————————-
Original source
37 responses to “JavaScript beginner tutorial 25 – changing an image source”
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!
Great clip
It helped me a lot. keep going on this way.
why did you use single quotation marks to assign a value for image_tracker, instead of using double quotation marks?
And is it the best possible code to swap two images?
{dom selection}.src = {path to image}. The entire tutorial in one moment
more images i can't add :(((((
This one was hard to understand
wonderfull
Thanks!
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.
Must we use single quotes inside script, but 2x quotes inside the body?
Why it not support with chrome
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!
<img sauce
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>
Great Video, thank you Quentin
helpful
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();">"
}
}
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"
}
};
I keep hearing a "bird" in the background, do you have a parrot?
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!
Wouldn't it be more preferable to declare image_tracker as a local variable instead of a global?
It really helps when you go back over the code line by line and explain it again step by step.
HEY….BUDY u r videos was awesome but it will be more better if u go more deep with coading ex….thanks
!!!!!!_____ 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>
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.
what is image_tracker
instead of writing
if(image_tracker=='f') can we do it without using image tracker by simply writing
if(image.src="facebook.png")
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?
Ah yes! And now some fun stuff!
Sick kid you
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?
the video is very good and easy to understand, i watched it on 5 Jan 2016. Thank you GURU. I am from Delhi, India.
documet.getElementById('social'); its not working
Why does the image_tracker variable have to be before the function for it to work inside of the function?
the only what i dont understand is, that y is there a need for image_tracker..?? i really don't get the concept of image_tracker which comes at the end…
i'm trying to switch btween 3 images plz help