Minimalist jQuery Rollover Image Effect Plugin - SwapImage

SwapImage is a super tiny (~1kb minified) jQuery plugin for image rollover effect that allows you to swaps out images on mouse hover in or out. The goal is to change the image to another one when mouse hover and revers back to the original image on mouse out.

How to use it:

1. Load jQuery JavaScript library and the jQuery SwapImage plugin in the html document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="/path/to/jquery-swapimage.min.js"></script>

2. Insert an image into the document and specify the paths of images displayed on mouse hover and mouse out using Html5 data attributes.

<img class="swapImage" src="out.jpg" 
     data-in="in.jpg" 
     data-out="out.jpg"
>

3. Active the rollover effect on the image.

// Preload images and bind swapping events.
$SwapImage.bindHoverEvents($('.swapImage'));

4. Specify the custom data attributes and settings.

$SwapImage.bindHoverEvents($('.swapImage'),{
  attrIn: 'data-in', 
  attrOut: 'data-out', 
  preloadImages: true 
});

---

This awesome jQuery plugin is developed by tomexou. For more Advanced Usages, please check the demo page or visit the official website.