So I have:

<img src="image1.png" 
     width="300" 
     height="115" 
     onmouseover="this.src='image1.png';" 
     onmouseout="image2.png">

This is working great, but once I hover and the second image turns on, I need it to turn off when I remove the cursor. Any way to achieve this with the simple inline JS I have?

So I have:

<img src="image1.png" 
     width="300" 
     height="115" 
     onmouseover="this.src='image1.png';" 
     onmouseout="image2.png">

This is working great, but once I hover and the second image turns on, I need it to turn off when I remove the cursor. Any way to achieve this with the simple inline JS I have?

• javascript
• jquery
• html
• css
• onmouseover

• I think you are looking for mouseOut (Jquery) api.jquery./mouseout Edit : I can't see your example – Core972 Commented Jun 29, 2015 at 17:59
• <code><img src="image1.png" width="300" height="115" onmouseover="this.src='image1.png';" onmouseout="image2.png"></code> – user8689 Commented Jun 29, 2015 at 18:01

2 Answers 2

Just undo the change in the same way by setting the src:

<img src="image1.png" width="300" height="115" onmouseover="this.src='image2.png';" onmouseout="this.src='image1.png';">

You could use jQuery and use the .hover function. This function performs both mouseenter and mouseleave functions for you so you only need to specify what should happen.

Also, you should specify your styling in a CSS file.

This solution does not supply you with an inline solution, but does reduce your code and separates your concerns.

This is your Javascript. I've used changing text in a div to show you an example rather than toggling an image, because I don't have an image handy, but it should be simple to use this as an example.

$("#hoverExample").hover(
  function () {
    $(this).text("Mouse has entered");
  },
  function () {
    $(this).text("Mouse has left");
  }
);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="hoverExample">Hover over this div</div>