How To Change Src Of Image In Javascript
How to Change Image Source using Javascript
In this tutorial, you volition larn how to change image source using javascript. Whenever nosotros want to add an image to a web projection, we make apply of the img tag. The img tag comes with a agglomeration of useful attributes and the src attribute is ane of them.
The src stands for source. In fact, without the src attribute, nosotros volition non be able to specify what paradigm nosotros want to exist displayed. We can besides signal the size of an paradigm by using tiptop and width attributes. However, in the modern earth, most developers adopt CSS to specify the size of the image.
Javascript is not required if nosotros want to display a static image using an img tag. Simply if we want to change the source or brandish an image dynamically, and then we have to make use of javascript. The img chemical element has src property and we tin leverage this to dynamically alter the source of the image.
In the following example, we accept multiple images in the images directory. We also take 4 push button elements and one image element. Upon click of each button, we will pick one image from the images directory and set it as a source of the paradigm element. Delight have a look over the code example and the steps given below.
HTML & CSS
- We have 3 elements in the HTML file (
div,img, andbutton). Thedivelement is but a wrapper for thebuttonelements. - By default, we take
1.jpgas a source for the image chemical element. - We have done some basic styling using CSS and added the link to our
style.cssstylesheet within thecaputelement. - We have also included our javascript file
script.jswith ascripttag at the lesser.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=ane.0"> <meta http-equiv="Ten-UA-Compatible" content="ie=border"> <link rel="stylesheet" href="style.css"> <championship>Document</title> </head> <body> <div> <button id="btn1">ane</button> <push button id="btn2">two</push> <push id="btn3">3</button> <button id="btn4">URL</button> </div> <img src="images/1.jpg" alt=""> <script src="script.js"></script> </torso> </html>
div { text-align: centre; margin-bottom: 20px; } button { height: 50px; width: 50px; } img { brandish: block; width: 250px; margin: auto; } Javascript
- Nosotros have selected all the
buttonelements and theimgelement using thecertificate.querySelector()method and stored them in thebtn1,btn2,btn3,btn4, andimgvariables respectively. - We take attached a
clickevent listener to all thebuttonelements. - In the
clickconsequence handler role of eachbuttonelement, we are using thesrcbelongings of theimgelement to alter the image with ane of the images present in the images directory. - In the example of the fourth
clickupshot handler function, nosotros are not picking an image from the images directory using a relative URL rather we are using an accented URL. The browser will load the prototype from that accented URL.
allow img = document.querySelector('img'); allow btn1 = document.querySelector('#btn1'); permit btn2 = document.querySelector('#btn2'); let btn3 = certificate.querySelector('#btn3'); permit btn4 = certificate.querySelector('#btn4'); btn1.addEventListener('click', () => { img.src = 'images/1.jpg'; }) btn2.addEventListener('click', () => { img.src = 'images/2.jpg'; }) btn3.addEventListener('click', () => { img.src = 'images/3.jpg'; }) btn4.addEventListener('click', () => { img.src = 'https://i.imgur.com/ypYJ8dy.jpg'; }) Source: https://www.fwait.com/how-to-change-image-source-using-javascript/
Posted by: hardinghort1989.blogspot.com
0 Response to "How To Change Src Of Image In Javascript"
Post a Comment