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


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.