How to change image on button click using Javascript

javascript change image onclick event

Hello Friends today in this artical we will learn how to change image source on button click using javascript.

<div class="row">
      <div class="col-md-12">
         <h2>Click on Social Media Name Then image will change</h2>
         <h3>How to change image source on click using javascript</h3>
      </div>
   </div>
   <br />
   <div class="row">
      <div class="col-md-3">
         <ul class="myul">
           <li onclick="facebook()">Facebook</li>
           <li onclick="twitter()">Twitter</li>
           <li onclick="insta()">Instagram</li>
           <li onclick="youtube()">Youtube</li>
         </ul>
      </div>
      
      <div class="col-md-3">
         <div class="image_container">
            <img id="myimg" src="img/facebook.jpg" width="100%"  />
         </div>
      </div>
      
      
      <div class="col-md-6">
        
      </div>
      
   </div>
</div>
<script>
    function facebook(){ 
        document.getElementById('myimg') 
        .src="img/facebook.jpg"; 
    } 
	
	 function twitter(){ 
        document.getElementById('myimg') 
        .src="img/twitter.jpg"; 
    } 
	
	 function insta(){ 
        document.getElementById('myimg') 
        .src="img/insta.jpg"; 
    } 
	
	 function youtube(){ 
        document.getElementById('myimg') 
        .src="img/youtube.jpg"; 
    } 
</script>

Leave a Reply

avatar
  Subscribe  
Notify of