Simple JQuery rollovers with preload
Time for a snippet of code on this blog I reckon. The other day I wanted a simple JQuery rollover mechanism for some in-markup images, but after a bit of a hunt I gave up as the only preload machanisms I could find involved a whole plugin or knowing the names of all the images on the page) – so I rolled my own.
To use:
- add the class “rollover” to each anchor containing a rollover image
- name your rollover images the same as the original image, with the suffix “_on”, and place them in the same location as the original image
- finally, add the following to your onReady function:
// Preload var rolloverImages = $('.rollover'); for(var i = 0; i < rolloverImages.length; i++){ var pic = new Image(1,1); pic.src = $('img', rolloverImages[i]).attr("src").split(".").join("_on."); } // Add hover functions $(".rollover").hover(function() { $('img', this).attr("src", $('img', this).attr("src").split(".").join("_on.")); }, function() { $('img', this).attr("src", $('img', this).attr("src").split("_on.").join(".")); });
The comments are closed.