JavaScript Only Image Hover

Question

This is purely for learning purposes; I know that CSS would be the preferred method for this situation.

I know that in JavaScript, you can use inline event handling to hover over an image, like so:

<img src="image.png" onMouseover="src='image2.png'" onMouseout="src='image.png'">

And I know you can install jQuery in your site, and do the following code or similar:

HTML:

<img src="image.png" id="image-hover">

jQuery:

$(document).ready(function() {
        $( "#hover-example" ).mouseover(function(){
            $(this).attr("src", "image-hover.png");
        });

        $( "#hover-example" ).mouseout(function(){
            $(this).attr("src", "image.png");
        });
    });

I was wondering how one would use JavaScript-only to produce that output, but use an external script instead of inline event handling. I've tried browsing through various Stack Overflow and Google searches, but mostly they lead to using jQuery instead. Could it be that complicated to apply that simple inline JavaScript to an external script?

Thanks!

Duncan Thacker · Accepted Answer · 2015-06-16 22:09:28Z

3

var image = document.getElementById("hover-example");
image.onmouseover = function() {  image.src = "image-hover.png"; }
image.onmouseout = function() {  image.src = "image.png"; }

answered Jun 16, 2015 at 22:09

Duncan Thacker

5,1891 gold badge12 silver badges24 bronze badges

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

1 Comment

Tania Rascia Over a year ago

Thank you so much! This was the simplest and easiest answer for me to understand. I would upvote you, but I'm still too new. I'm not entirely certain why my post got downvoted; I know it's a stupidly simple question, but I learned something and maybe someone else will.

adeneo · Accepted Answer · 2015-06-16 22:10:52Z

3

Pretty much the same way

var img = document.getElementById('image-hover');

img.addEventListener('mouseenter', function() {
    this.src = 'image-hover.png';
}, false);

img.addEventListener('mouseleave', function() {
    this.src = 'image.png';
}, false);

answered Jun 16, 2015 at 22:10

adeneo

319k29 gold badges410 silver badges392 bronze badges

1 Comment

Tania Rascia Over a year ago

Thanks a lot! I tested that out and it worked. It has a few elements I haven't learned yet, so now I know to look them up.

Danny Delott · Accepted Answer · 2015-06-16 22:08:33Z

1

Since you're interested in a vanilla JavaScript implementation, take a look at the documentation for the mouseover event.

You can achieve your desired result by doing something like this:

var img = document.getElementById('image-hover');

img.addEventListener('mouseenter', function() {
    this.src = 'image-hover.png';
}, false);

img.addEventListener('mouseleave', function() {
    this.src = 'image.png';
}, false);

answered Jun 16, 2015 at 22:08

Danny Delott

7,0284 gold badges38 silver badges60 bronze badges

1 Comment

Tania Rascia Over a year ago

Thanks! I'll look into the documentation.

Collectives™ on Stack Overflow

JavaScript Only Image Hover

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related