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, and button). The div element is but a wrapper for the button elements.
By default, we take 1.jpg as a source for the image chemical element.
We have done some basic styling using CSS and added the link to our style.css stylesheet within the caput element.
We have also included our javascript file script.js with a script tag 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

Ezoic

Nosotros have selected all the button elements and the img element using the certificate.querySelector() method and stored them in the btn1, btn2, btn3, btn4, and img variables respectively.
We take attached a click event listener to all the button elements.
In the click consequence handler role of each button element, we are using the src belongings of the img element to alter the image with ane of the images present in the images directory.
In the example of the fourth click upshot 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