JS: Image rollover

Question

I am trying to replace src of img with id of img by using mouseover event in jQuery. However my console error says that $(...) is null.

Could anybody help me please? Thank you.

Here is my project:

var $ = function (id) {
    return document.getElementById(id);
}

window.onload = function () {
var listNode = $("#image_rollovers img");
    $(document).ready(function() {
        listNode.each(function() {
            var oldURL = $(this).attr("src");
            var newURL = $(this).attr("id");

            var rolloverImage = new Image();
            rolloverImage.src = newURL;
            $(this).hover(
                function() {
                    $(this).attr("src", newURL);
                },
                function() {
                    $(this).attr("src", oldURL);
                }
);
});
});
}

https://jsfiddle.net/rn70Lqrr/

Answer 1

There is a lot of unnecessary code in your Javascript. I updated you the JFiddle to resolve the issues. Basically the id function was not needed, JQuery needed to be included. you were trying to loop over the list object, when what you really wanted to do was loop over the images.

here is a link to the updated fiddle:

https://jsfiddle.net/tuboaLnd/2/

and here is the updated Jquery code:

$(document).ready(function() {
    var listNode = $("#image_rollovers li img");               
    listNode.each(function() {
        var oldURL = $(this).attr("src");
        var newURL = $(this).attr("id");
        var rolloverImage = new Image();
        rolloverImage.src = newURL;
        $(this).hover(
            function() {
                $(this).attr("src", newURL);
            },
            function() {
                $(this).attr("src", oldURL);
            }
        );
    });
});

Answer 2

I second SalientGreen. He was faster than me. :) I won't update his code, but I got it working like this....

HTML (notice the two data attributes I added)

    <h1>Image Rollovers</h1>
    <ul id="image_rollovers">
        <li><img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Favicon_250x250.png" alt="" data-src="https://upload.wikimedia.org/wikipedia/en/6/6b/LifestylePodnetwork-250x250.png" data-old="https://upload.wikimedia.org/wikipedia/commons/0/05/Favicon_250x250.png" /></li>
    </ul>            

Javascript:

$(document).ready(function(){
  $('img').hover(
    function() {
      $(this).attr("src", $(this).data("src"));
    }, function() {
      $(this).attr("src", $(this).data("old"));
    }
  );
});

Maybe this will help you in the future. :)

Answer 3

Here is how I would do it:

 $(document).ready(function () { // Preload images $('img[data-rollover-src]').each(function(img){ var newURL = $(this).data('rollover-src'); var rolloverImage = new Image(); rolloverImage.src = newURL; }); $(document).on('mouseenter mouseleave','img[data-rollover-src]',function() { var oldUrl = $(this).attr('src'); var newUrl = $(this).data('rollover-src'); $(this).attr('src',newUrl).data('rollover-src',oldUrl); }); }); 

 /* the default styles for the document */ body { font-family: Arial, Helvetica, sans-serif; margin: 0 auto; padding: 20px; width: 190px; border: 3px solid blue; } h1, ul { margin: 0; padding: 0; } h1 { padding-bottom: .5em; } img { height: 175px; } /* the styles for the center content */ section { } li { padding-right: 10px; display: inline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <h1>Image Rollovers</h1> <ul> <li> <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Favicon_250x250.png" alt="" data-rollover-src="https://upload.wikimedia.org/wikipedia/en/6/6b/LifestylePodnetwork-250x250.png"> </li> </ul> </section> 

Answer 4

you have

listNode = $("image_rollovers");

it should be

listNode = $("#image_rollovers");

you're missing the '#'

As best I can tell, there's a js file missing in your fiddle:

 <script src="rollover.js"></script>