SmartRoll is a JavaScript script that provides two or three-state locking or 'sticky' image-based rollovers. Multiple independent button groups can be configured in the document.

Configuration is extremely simple and unobtrusive.

The hovered state of a button is locked on click; in tri-state mode a third image displays the active state of the clicked button. Buttons can be preset on page load, useful when using the script across multiple pages.

Optional captioning is supported, with the caption text appearing in any styled element created by the developer.

S m a r t R o l l - The way rollovers should work

Dual or tri-state locking / sticky javascript rollovers that can be organised into independent groups. With optional captioning and button presetting even across frames. Clean, unobtrusive installation - requires no messy code within HTML tags.

We suggest also trying the single-image rollover concept of FadeAround.

Button
Button
Button
Button
Button
The buttons on the left are dual-state.

The set on the right is using tri-state mode and de-latchable buttons.

When enclosed by links, rollovers are keyboard-accessible.

Button
Button
Button
Button
Button
These buttons navigate to Wikipedia.
With Optional Text Captioning!

Output window for buttons above


SmartRoll generates groups of image-based rollover buttons, whose hovered state is preserved or latched when clicked. The clicked button remains latched until another button in the same set is clicked.

Each button group can be configured to work in dual-state mode as described above, or in tri-state mode, in which the button displays a third graphic in its clicked or active state.

An individual document can have multiple independent groups of buttons, working in both modes.

Any button can be preset on page load, either by a simple function call in the document, or by passing a url parameter which the script will interpret with no further coding. Presetting can work across frames, useful when using a rollover navigation bar in a separate frame.

Latched buttons can be configured to unlatch when clicked. This may be desirable when using rollovers to control toggle functions, like showing/hiding one of a group of elements.

Installation and configuration is very simple, requiring a single function call for each button group. There is no need to edit the supplied code.

TO GET THE SCRIPT FILE WITH INSTRUCTIONS, CLICK HERE THEN CHOOSE 'SAVE'.

This script not suitable? Tell us why.