Enhance Your Websites with Dynamic JavaScript Changing Image Source

by

Exercise 4: Changing Image Source

🌟 Enhance Your Websites with Dynamic JavaScript! πŸ“Έβœ¨

In our latest tutorial, we dive into a fascinating JavaScript feature: dynamically changing the source of an image with a button click. This technique is a staple in web development, perfect for creating image galleries, sliders, or just adding interactive elements to your site.

πŸ‘©β€πŸ’» What You’ll Discover:

  • The basics of selecting HTML elements with JavaScript.
  • Adding event listeners to handle user interactions.
  • Using JavaScript to dynamically change image sources.

πŸš€ Great for All Skill Levels:

This tutorial is tailored for anyone interested in enhancing their web development skills, from beginners to more experienced developers looking for a refresher on dynamic content manipulation.

πŸ“Œ Why It’s Important:

  • A key skill for creating interactive and engaging web pages.
  • Understanding this concept opens the door to more advanced JavaScript functionalities.
  • Essential for anyone looking to create visually dynamic websites.

#JavaScript #WebDevelopment #DynamicContent #InteractiveWebDesign #FrontEndDevelopment #WebDesign #CodingTutorial #TechSkills #LearnToCode #Programming #DigitalCreativity #WebDevCommunity

Objective: Change the source of an image on the webpage.

HTML:

           <img id=”myImage” src=”Images/image1.png” alt=”Image” >

           <button id=”btn1″>Change Image</button>

Javascript

const myImage = document.querySelector(‘#myImage’);

const btn = document.querySelector(‘#btn1’);

btn.addEventListener(‘click’,()=>{

   const txt = myImage.src;

   if(txt.substring(txt.length-5) == “1.png”){

       myImage.src = “Images/image2.png”;

   }else{

       myImage.src = “Images/image1.png”;

   }

})

Explanation: The script changes the source of an image to ‘image2.jpg’ when a button is clicked.

Detailed Explanation of the Code

The code snippet provided is a basic example of how to change the source of an image on a webpage when a button is clicked, using JavaScript. This is a common functionality in web development for creating image sliders or changing content dynamically.

HTML Structure

  • The HTML consists of an <img> tag and a <button> tag.
  • The <img> tag has an ID myImage and initially displays an image (image1.png located in an Images folder).
  • The <button> has an ID btn1 and is labeled “Change Image”.

JavaScript Functionality

  • Selecting Elements:
    • const myImage = document.querySelector(‘#myImage’);: Selects the image element using its ID.
    • const btn = document.querySelector(‘#btn1’);: Selects the button element using its ID.
  • Adding an Event Listener to the Button:
    • btn.addEventListener(‘click’, () => { … });: Attaches a ‘click’ event listener to the button. When the button is clicked, the function provided as an argument is executed.
  • Changing the Image Source:
    • Inside the event listener, the code changes the src attribute of the image.
    • const txt = myImage.src;: Gets the current source of the image.
    • The if statement checks whether the current image source ends with “1.png”.
    • If it does, the source of the image is changed to “image2.png”; otherwise, it’s changed back to “image1.png”.

This code effectively creates a toggle effect, where clicking the button alternates the image between “image1.png” and “image2.png”.