Change the image source on rollover using jQuery

Dealing with multiple images

If multiple images are present, we need a more general solution. The golden ticket here is the data-other-src attribute. Use it to store the rollover image source for every single image:

$('img').each(function() {
  $(this).data('other-src', $(this).attr('src').replace('.jpg', '-over.jpg')); //Library? No, it's a book-keeper
});


Next, swap the images using this:

$('img').hover(
  // When mouse enters the room, change into party clothes
  function() { $(this).attr('src', $(this).data('other-src')); },
  // When mouse leaves the room, get back into the pyjamas
  function() { $(this).attr('src', $(this).data('other-src').replace('-over', '')); }
);


This piece of genius lets you handle rollover for numerous images using just a single event handler. Efficiency level? 1000!

Lights instant on: Preload images

For a stoic transition between images, it's a good idea to preload the rollover images. This ensures smooth changeover without annoy blinking.

$('<img>').attr('src', 'new-image.jpg'); // A stitch in time saves...loading time!


Incorporating this in the $(function() {}) handler ensures the preload happens right off the block when the page loads.

Master handling with CSS and Sprites

Why use JavaScript when CSS can handle it?

CSS can handle rollovers quite efficiently with the :hover pseudo-class:

#image {
  background-image: url('original-image.jpg');
  transition: background-image 0.3s ease-in-out; // Smooth operator!
}
#image:hover {
  background-image: url('new-image.jpg');
}


Taking this route might improve performance as it's tapping into the browser's native capabilities.

Sprites - Combine, then divide

Using sprite sheets is like putting all your clothes in one suitcase. All states of an image are in one file, and the image element's background-position gets a makeover on hover. This could lead to fewer server requests and a quicker page load time.

Accessibility and responsiveness

Remember to test your hover effects on various devices. Screen readers and keyboard navigation should not face hurdles because of your cool hover effects. Accessibility as cool as hover effects!

Follow up, Document and Dominate

For long-term peace, keep your code documented and modular. If your project is based on jQuery, ensure your code plays well even when JavaScript is disabled.

Ensure your image paths are valid and preload your rollover images to eradicate broken links or delayed loading.