Change Image On Hover Javascript

Question

I have done my research and looked at tons of things, but none of them are working for me. This is my code at the moment. The original image displays fine, but nothing happens when I hover.

Javascript (In <head>)

<script>
    function onHover()
    {
        $("#news").attr('src', 'img/newsHover.png');
    }

    function offHover()
    {
        $("#news").attr('src', 'img/news.png');
    }
</script>

HTML

<img id="news" onmouseover="onHover();" onmouseout="offHover();" height="100px" width="100px" src="img/news.png"></a>

Your code is correct. Please check console for any other errors. — roshan
– roshan, Commented Feb 8, 2015 at 19:27
The code is correct. Check image paths and the console for errors. Here is a working jsfiddle — Viktor Bahtev
– Viktor Bahtev, Commented Feb 8, 2015 at 19:30
While you are using jQuery, you might have a look at jQuery hover. Taking the onmouse from the html may make your page better maintainable — bart s
– bart s, Commented Feb 8, 2015 at 19:31
I think it is because of "/" at the beginning of your image path.Change "/img/newsHover.png" to "img/newsHover.png". — roshan
– roshan, Commented Feb 8, 2015 at 19:34
Console reports "$" is not defined and I changed the path to remove the first / but it still wouldn't work. .hover doesn't work either, that is what I first tried. Maybe the problem is with .attr? — STFLightning
– STFLightning, Commented Feb 9, 2015 at 9:00

abhiklpm · Accepted Answer · 2015-02-09 10:03:49Z

6

A pure java script answer, no need of any external functions or jquery

<img id="news" onmouseover="this.src='img/newsHover.png'" onmouseout="this.src='img/news.png'" height="100px" width="100px" src="img/news.png">

answered Feb 9, 2015 at 10:03

abhiklpm

1,6532 gold badges16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dan · Accepted Answer · 2015-02-08 19:42:20Z

0

There may be a good reason for what you're doing, but are you sure you need to use JavaScript?

If you're not doing anything fancy then it would probably be better to use the CSS hover selector: http://www.w3schools.com/cssref/sel_hover.asp

answered Feb 8, 2015 at 19:42

Dan

7,7946 gold badges36 silver badges51 bronze badges

2 Comments

bart s Over a year ago

A more extensive explanation can be found at developer.mozilla.org

STFLightning Over a year ago

I usually use CSS, but I'm working with circle images and I don't want to have a square div with a circle image background. Perfectionism I'm afraid.

Ivošš · Accepted Answer · 2015-02-09 09:27:44Z

0

this is very easy example, not animation:

HTML:

<img src='https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/clean.png'>

use jQuery:

$(document).ready(function(){
    $('img').hover(
        function(){$(this).attr("src","https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/exit.png")},
        function(){$(this).attr("src","https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/clean.png")}
    );
});

Example Not Animation

And this is example with animation:

HTML:

<img src='https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/clean.png' class='clean' >
<img src='https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/exit.png' class='exit' >

CSS:

img{
    position:absolute;
    top:0;
    left:0;
}

use jQuery:

$(document).ready(function(){

    $(".exit").hide();

    $(".clean").hover(function(){
        $(".clean").fadeOut();
        $(".exit").fadeIn();
    });    

    $(".clean").mouseleave(function(){
        $(".exit").fadeOut();
        $(".clean").fadeIn();
    });    

});

Example With Animation

answered Feb 9, 2015 at 9:27

Ivošš

1,16613 silver badges18 bronze badges

1 Comment

STFLightning Over a year ago

Tried your code, the example without animation worked on the site you linked to, but not on mine. Maybe there's a problem with the image file.

Ivošš · Accepted Answer · 2015-02-09 10:13:13Z

0

So you can use only this example:

<img 
    src='https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/clean.png' 
    onmouseover="this.src='https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/exit.png'"
    onmouseout="this.src='https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/clean.png'"
    height="100px"
    width="100px"
    id="news"
>

EXAMPLE

answered Feb 9, 2015 at 10:13

Ivošš

1,16613 silver badges18 bronze badges

Collectives™ on Stack Overflow

Change Image On Hover Javascript

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related