• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • Home
  • Learn to Code
    • Python
    • JavaScript
  • Code Snippets
    • HTML
    • JavaScript
    • jQuery
    • PHP
    • Python
    • SAS
    • Ruby
  • About
You are here: Home / JavaScript / How to Change an Image on Hover Using JavaScript

How to Change an Image on Hover Using JavaScript

September 29, 2022 Leave a Comment

We can change an image on hover in JavaScript by making use of the image src property along with the onmouseover and onmouseout events.

<img src="img.jpg" onmouseover="changeImg1()" onmouseout="changeImg2()">

<script>
  function changeImg1(){
    //Swap image to the new one
  };
  function changeImg2(){
    //Swap image back
  };
</script>

Let’s see the full HTML code and JavaScript for this below.


Let’s say I have the following HTML code:

<div id="div1">
  <img id="img1" src="img.jpg" onmouseover="changeImg1()" onmouseout="changeImg2()">
</div>

To swap the image above to another image on hover, we can use the src property. We can change the src of #img1 from img.jpg to anotherImg.jpg in our functions.

Here is what our functions would look like to change the image on hover.

function changeImg1(){
  document.getElementById("img1").src = "anotherImg.jpg";
};
function changeImg2(){
  document.getElementById("img1").src = "img.jpg";
};

Let’s see an interactive example of this below.

Change an Image on Hover Using JavaScript

To change the source of an image on user mouse hover we can combine the src property with onclick events.

Let’s say we have the following HTML, similar to our example from above.

<style>#img1 { height:100px; }</style><div id="div1">
  <p>Hover on the image below to change it.</p>
  <img id="img1" src="https://theprogrammingexpert.com/wp-content/uploads/example-img1.png" onmouseover="changeImg1()" onmouseout="changeImg2()">
</div>

We have two images, example-img1.png is a picture of gears and example-img2.png is the same image, but with different colors.

We have added two onclick events to the image that will run a function when the user moves their mouse over the image, and off of the image. We will swap the images from the example-img1.png version to the example-img2.png version when the user does this.

Here is the function below that will accomplish this:

function changeImg1(){
  document.getElementById("img1").src = "https://theprogrammingexpert.com/wp-content/uploads/example-img2.png";
};
function changeImg2(){
  document.getElementById("img1").src = "https://theprogrammingexpert.com/wp-content/uploads/example-img1.png";
};

The final code and output for changing an image on hover in JavaScript is below:

Code Output:

Hover on the image below to change it.

Full Code:

<style>#img1 { height:100px; }</style>
<div id="div1">
  <p>Hover on the image below to change it.</p>
  <img id="img1" src="https://theprogrammingexpert.com/wp-content/uploads/example-img1.png" onmouseover="changeImg1()" onmouseout="changeImg2()">
</div>

<script>

function changeImg1(){
  document.getElementById("img1").src = "https://theprogrammingexpert.com/wp-content/uploads/example-img2.png";
};
function changeImg2(){
  document.getElementById("img1").src = "https://theprogrammingexpert.com/wp-content/uploads/example-img1.png";
};

</script>

Hopefully this article has helped you understand how to change an image on hover in JavaScript.

Other Articles You'll Also Like:

  • 1.  Check if Checkbox is Checked in JavaScript
  • 2.  Using JavaScript to Redirect to a Relative URL
  • 3.  How to Select All Checkboxes in JavaScript
  • 4.  Math abs JavaScript – How to get the absolute value of a number using JavaScript
  • 5.  Using JavaScript to Get New Date Format in dd mm yy
  • 6.  How to Create a JavaScript Countdown Timer
  • 7.  Using JavaScript to Remove Trailing Zeros From a Number or String
  • 8.  Check That String Does Not Contain Character in JavaScript
  • 9.  Using JavaScript to Insert Item Into Array
  • 10.  Using JavaScript to Replace Space With Dash

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy