How to change the image source attribute using Javascript
Make money for being or staying online/internet.
You will get a $50 starting gift when you join using this code: Exode4LKrbujm1z and link:: GET THE OFFER NOW!!
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
Save up to 80% with this Domain & Shared Hosting package deal! 80% OFF - GET OFFER NOW
Related Post(s)
» How to Install Node.js® and NPM on Windows
» Here are some games made with javascript
» Learn how to Switch Between Dark and Light Mode With CSS and Javascript
» How to Animate Font Awesome Icons With Javascript
» How to create a Dynamic GO BACK button on a 404 Error Page
collections_bookmark Category :: Javascriptdate_range Published :: 5 years ago At: 02:38 PM
event_note Detailed Date :: Jan 21st, 2019
person Writer :: Code