Advanced Search

Function Rollover

/ Published in: jQuery
Save to your folder(s)
This function will find elements with your default classOver and will change the file name to add _ro into it.
ie: filename.gif -> filename_ro.gif

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*  ------------------------------------------------------------------
  2.     Rollover --------------------------------------------------------- */
  3.     function imgExist(img) { return $.ajax({ url: img, async: false }).status; }
  4.  
  5.     $.fn.rollover = function (settings) { // param checkIfExist used to check if the image exist, default value "false"
  6.         var container = this;
  7.  
  8.         // defaults settings
  9.         settings = jQuery.extend({
  10.             classOver: ".ro",
  11.             over: "_o",
  12.             checkIfExist: false
  13.         }, settings);
  14.  
  15.         return container.each( function() { 
  16.             var Elm = this;  
  17.             var overElm = $(settings.classOver, Elm);
  18.  
  19.             overElm.each(function(){
  20.                 var srcOut = $(this).attr('src');
  21.                 var ftype = srcOut.substring(srcOut.lastIndexOf('.'),srcOut.length);
  22.                 var fname = srcOut.substring(0, srcOut.lastIndexOf('.'));
  23.                 var srcOver = fname + settings.over + ftype;
  24.                 var exist = true;
  25.                 if (settings.checkIfExist === true) { exist = (imgExist(srcOver) != 404); }
  26.                 if(exist)  {
  27.                     $(this).hover(
  28.                         function() { $(this).attr('src', srcOver ); },
  29.                         function() { $(this).attr('src', srcOut ); }
  30.                     );
  31.                 }
  32.             });
  33.         });
  34.     };

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.