Rolla - jQuery Plugin

Rolla Version: 1.2
(c)2008 Thomas Petrovic
http://bonsai.co.at
http://freakzero.com

Description

Rolla creates automatically a crossfade Hover effect (IE6 = normal Rollover) with Images from a linktext with a css Class definition

Settings

imgDir: Image Directory for Buttons (default: images)
onFade: Fade speed on MouseHover (default: fast)
outFade: Fade speed out MouseHover (default:fast)
mainOpacity: Opacity of the Image on Rollover (default:1 [100%])
css: Css Class (default:rolla)

Example for custom Settings:
$.rollaHover({
  imgDir: 'images',
  onFade: 'fast',
  outFade: 'fast',
  mainOpacity: "1",
  css: 'rolla'
  });

Example

Javascript
$(document).ready(function() {
$.rollaHover();
});

CSS
a.rolla {
// Dimensions of the Pictures
width: 32px;
height: 32px;
}

img.rolla {
border: 0;
}

HTML
<a class="rolla" href="http://jquery.com/">Test</a>

Images in ./images/ folder:

test From: <a href="http://jquery.com/" class="rolla">test</a>
To:<a href="http://jquery.com"><img src="images/test.jpg" alt="test" title="test" class="rolla"></a>
(try out this also without javascript)

Tested in

Opera Firefox IE7 IE6

Download Demopage

Licensed under GPL 2