Ultra-easy image rollover solution with jQuery (no plug-ins needed)


Found a fantastic image rollover solution on StackOverflow recently, with this little piece of jQuery and no other plug-ins needed your rollovers works easily and seamlessly…

HTML

<img data-other-src="big-zebra.jpg" src="small-cat.jpg">
<img data-other-src="huge-elephant.jpg" src="white-mouse.jpg">
<img data-other-src="friendly-bear.jpg" src="penguin.jpg">

Javascript

$('img').on('mouseenter mouseleave', function() {
 $(this).attr({
  src: $(this).attr('data-other-src'),
'data-other-src': $(this).attr('src')
})
});

Leave a Reply

Your email address will not be published. Required fields are marked *