Changing images on hover

Why bother writing CSS or inline mouseover events for changing images when hovering over them? Now you can do exectly the same thing by implementing just a few rows of JavaScript! Download: Git Hub | ChangeImgOnHover

cat 1
Hover on me to change me!
cat 2
Hover on me!
cat 3
Am I cute?

Instructions for use

  1. Download and unzip the package from GitHub: ChangeImgOnHover.
  2. Put the rows of code in the bottom of your html-document or make sure DOM has been fully created before executing the jQuery-code. You can also force the browser to wait until the DOM is ready, by embedding the code: $(document).ready(function() { jQuery plugin here });.
  3. Create a hover variant for every image that you want to have hover effect on. Extend the image name with _hover. All images should lay in the same directory (see image to the right).
  4. In the HTML-code, the images must be assigned with the class name of ”hover”.
  5. Good luck and enjoy!
Image directory
All images in the same place.

Html

<img src='img/cat1.jpg' class='hover' alt='cat 1' />
<img src='img/cat2.jpg' class='hover' alt='cat 2' />
<img src='img/cat3.jpg' class='hover' alt='cat 3' />

Script

01 (function($) {
02   $.fn.changeImgOnHover = function() {
03     $('.hover').each(function() {
04       var imgName = $(this).attr('src').slice(0,-4);
05       var extName = $(this).attr('src').split('.').pop();
06       var hoverImg = imgName + '_hover.' + extName;
07       var origImg = imgName + '.' + extName;
08       $(this).mouseover(function() {
09         $(this).attr('src', hoverImg);
10       });
11       $(this).mouseout(function() {
12         $(this).attr('src', origImg);
13       });
14     });
15   };
16 }) (jQuery);

The plugin is triggered by a single row of code outside the function, preferably just before the closing tag inside your document’s body: $('.hover').changeImgOnHover();