11:44 AM
TheEpicChocobo
Sure there are tons of javascript rollover options out there. So what makes this one any better. Well it’s just simple to use, loads quickly, and no need to preload images. Sounds to good to be true? well it’s not. All you have to do is download my jRoller package and use the example there to add it to your site. I accomplish this by having all images and the rollover saved as the same image like the Red and Grey one on here. In the example just the grey will show and when you hover over it it’ll turn red. This works great with text headers that are a non web safe font and you want it to change color or background on rollover.
The usage is very simple. Simply put all your images inside of a container either table, div, span, whatever, and give it either an ID or 
Class of rollernav. You can modify the jQuery.jRoller.js file at the bottom to add/remove items. Then it will simply go through all the image tags there and reformat them to 1/2 the height of the image, thus cutting off the hover part, and setting it to the background of a Div that will move the background on hover. It does all this on load so it doesn’t have to reformat the page after it’s loaded and make your site look crazy for a second or so on slower machines.
I have provided 3 links here, a download with example, a download of just the js file in zip format, and a hot link to the file so you can add it to your blog or site without having to download it.
Hot Link: http://www.freedomchicken.com/media/10278/jquery.jroller.js
Download only the JS file Here
By: FreedomChicken
Posted in: 
