This script fades all but the hovered or touched element in a specified group of images or other elements. Commonly used to fade thumbnail image or link groups on mouseover or touch.

FadeAround is a JavaScript script that fades all but the hovered or touched element in a specified group. This has the effect of highlighting a hovered image or element without altering its appearance. The script produces in effect single-image rollovers that save bandwidth and simplify site design. Multiple independent element groups can be configured in the document.

Configuration is extremely simple and unobtrusive.

The hovered state of an element can be optionally locked on click, producing the equivalent effect of 'sticky rollovers'.

Highlighting of an element can be preset on page load, which is useful when using the script across multiple pages.

F a d e A r o u n d

Highlight a hovered or touched element in a specified group, by fading all but the selected element.

Simple Buttons Using Optional Preset

Button Button Button Button Button

'Fadeout' Rollovers Using Optional Locking

photo photo photo photo


Fading Text Links

Hover   Fades   Other   Links


Effect of fading images contained within background-coloured divs

logo
logo
logo
logo