How to change the image source attribute using Javascript
In this easy tutorial i will be showing you how JavaScript changes the value of the src (source) attribute of an img tag.JavaScript can change any kind of HTML element on a webpage because it has One of many JavaScript HTML methods called getElementById().
This example uses the method to find an HTML element with id="bulb" and changes the image src (source) attribute to a given image.
Absorbing this amount of content would be alot if you are just reading it,so i have put together a very simple video for you to understand the code below.
Simple HTML code - copy to text Editor
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
<style>
.container{
display:flex;
height:100vh;
}
.controllers{
margin:auto;
}
</style>
</head>
<body>
<div class="container">
<div class="controllers">
<button id="On">Switch on</button>
<img id="bulb">
<button id="Off">Switch off</button>
</div>
</div>
</body>
</html>
Javascript Code
//Initialize the default bulb
document.getElementById('bulb').src='img/bulboff.gif';
//Grab on the switch on btn and add an event(click)
document.getElementById('On').addEventListener('click',switchOn);
//Grab on the switch off btn and add an event(click)
document.getElementById('Off').addEventListener('click',switchOff);
//Runs when the switch on button is clicked
function switchOn(){
let On = document.getElementById('bulb');
On.src = 'img/bulbon.gif';
}
//Runs when the switch off button is clicked
function switchOff(){
let Off = document.getElementById('bulb');
Off.src = 'img/bulboff.gif';
}
Example
To download source code: click here description
Related Post(s)
» How to change the image source attribute using Javascript
» How to Install Node.js® and NPM on Windows
» Learn how to Switch Between Dark and Light Mode With CSS and Javascript
» How to print Webpage content using Javascript
» How to create Custom Social Media Share Buttons Using JavaScript
collections_bookmark Category :: Javascriptdate_range Published :: 2 years ago At: 02:38 PM
event_note Detailed Date :: Jan 21st, 2019
person Writer :: Code
- RECENT POSTS
2 months ago
A JavaScript library for formatting and manipulating numbers - Numeral.js
Check out this lightweight JavaScript library used for formatting and manipulating numbers.
3 months ago
All Countries Drop Down List | HTML Select Country Name
This simple country dropdown list is freely available for you to copy and use in your project forms.
3 months ago
HTML Entities Code Alphabet Discovery Using JavaScript
In this post I will show how writing just a few lines in JavaScript will allow you to render, browse and discover the alphabetical letters using a set of HTML entity codes.
3 months ago
YTS YIFY MOVIES API - PROJECT PREVIEW
Download YTS YIFY movies using this simple project I created using their API.
3 months ago
Display Random Advice On Your Website or Web App Using Advice Slip JSON API
Here is a short project to display the use of APIs. I decided to work with an advice API because it seemed like a fun one that I haven't worked on before.
5 months ago
How do I get a YouTube video thumbnail from YouTube using PHP
Have you ever been on youtube and admired a thumbnail of a video?
7 months ago
How to recreate Facebook's console warning
When I was inspecting some code on Facebook. I came across this interesting feature. A simple styled console warning message from Facebook to its dear users(products).
10 months ago
How To Create A Stacked Gallery Using HTML And CSS Source Code
In this post I provide you with the source code for the youtube tutorial I made on how to create a Stacked image gallery Using HTML and CSS.
- ADVERTISEMENT
