Change image onmouseover

Question

What's the correct way to change an image on mouseover and back on mouseout (with/without jQuery)?

<a href="#" id="name">
    <img title="Hello" src="/ico/view.png" onmouseover="$(this).attr('src','/ico/view.hover.png')" />
</a>

Ok, this is working, but how to change back to the original image after mouseout ?

If it is possible, I want to do this thing inline, without document.ready function.

Answer 1

here's a native javascript inline code to change image onmouseover & onmouseout:

<a href="#" id="name">
    <img title="Hello" src="/ico/view.png" onmouseover="this.src='/ico/view.hover.png'" onmouseout="this.src='/ico/view.png'" />
</a>

Answer 2

Try something like this:

HTML :

<img src='/folder/image1.jpg' id='imageid'/>

jQuery:​

$('#imageid').hover(function() {
  $(this).attr('src', '/folder/image2.jpg');
}, function() {
  $(this).attr('src', '/folder/image1.jpg');
});

• DEMO

EDIT: (After OP HTML posted)

HTML:

<a href="#" id="name">
    <img title="Hello" src="/ico/view.png"/>
</a>

jQuery:

$('#name img').hover(function() {
  $(this).attr('src', '/ico/view1.png');
}, function() {
  $(this).attr('src', '/ico/view.png');
});

• DEMO

Answer 3

你要在/之前放一两个点

('src','./ico/view.hover.png')"

Answer 4

Here is an example:

HTML code:

<img id="myImg" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"/>

JavaScript code:

$(document).ready(function() {
    $( "#myImg" ).mouseover(function(){
        $(this).attr("src", "http://www.jqueryui.com/images/logo.gif");
    });

    $( "#myImg" ).mouseout(function(){
        $(this).attr("src", "http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif");
    });
});

Edit: Sorry, your code was a bit strange. Now I understood what you were doing. ;) The hover method is better, of course.

Answer 5

jQuery has .mouseover() and .html() . You can tie the mouseover event to a function:

1. Hides the current image.
2. Replaces the current html image with the one you want to toggle.
3. Shows the div that you hid.

The same thing can be done when you get the mouseover event indicating that the cursor is no longer hanging over the div.

Answer 6

You can do that just using CSS.

You'll need to place another tag inside the <a> and then you can change the CSS background-image attribute on a:hover .

ie

HTML:

<a href="#" id="name">
  <span>&nbsp;</span> 
</a>

CSS:

a#name span{
  background-image:url(image/path);
}

a#name:hover span{
  background-image:url(another/image/path);
}

Answer 7

<a href="" onMouseOver="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/ask-icon.png';" onMouseOut="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png';">
<img src="http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png" name="MyImage">

Demo http://jsfiddle.net/W6zs5/

Answer 8

I know someone answered this the same way, but I made my own research, and I wrote this before to see that answer. So: I was looking for something simple with inline JavaScript, with just on the img , without "wrapping" it into the a tag (so instead of the document.MyImage , I used this.src )

<img 
onMouseOver="this.src='ico/view.hover.png';" 
onMouseOut="this.src='ico/view.png';" 
src="ico/view.png" alt="hover effect" />

It works on all currently updated browsers; IE 11 (and I also tested it in the Developer Tools of IE from IE5 and above), Chrome, Firefox, Opera, Edge.