Changing image source attribute on mouse hover

Question

I have a requirement where I want to change source of image on mouse hover. The way I am doing this is:

document.getElementsByTagName('img').addEventListener('mouseover', function() 
{
    document.getElementsByTagName('img').setAttribute('src', 'url/of/the/image');
});

I want to know is this correct way of doing this. Or should add an overlay div on image tag and show my image there?

Answer 1

With jQuery you can do it like this:

$('img').on('mouseover', function(e) {
   $(this).attr('src', '/link/to/image').css({}); // change src and css
   // or you can use div with background image style property
})