Automated image rollover script


Skip navigation.

Site search

Site navigation

Details and download

Simplifying image rollovers and click effects

This describes how to insert my automated image rollover and click script into a page to greatly simplify the process of creating image rollover and click effects.

To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.

See also my image handling page, which describes how to use JavaScript to do basic image rollovers, preloading and pre-caching.

Note: for the best accessibility, there is no substitute for real links and form buttons, but when applied correctly (inside a link for example), this script is as accessible as plain HTML.

Image rollovers have always been one of the most popular JavaScript effects, but the usual bloated code produced by web page generators makes an unnecessary mess of this simple effect, and the maintenance required often takes a significant amount of time. Even carefully hand crafted code often makes the HTML unnecessarily complicated. This script makes image rollover and click effects as simple as adding the src attribute to an image.

Regular script

This uses the standard technique for producing image rollovers and click effects. Each image is in a link, which detects the movements of the mouse and changes the images accordingly. The images are cached first using script, then the image locations for the effects are held in the links event handlers (or in an external function). This is probably the best of all three methods for most webmasters, as it offers the widest browser support without any accessibility problems, but it does require a good working knowledge of JavaScript.

Hover: Click: Hover and click:

HTML used



This uses an advanced pure CSS technique. Links are converted into images using CSS, and the mouse movements are monitored automatically by the browser using the :hover and :active pseudo classes.

Hover:    Click:    Hover and click:  

HTML used


My script

This uses my script. The image locations are all put in as HTML. The script automatically checks for these, and caches images appropriately. The image itself detects mouse movements and the script changes the image locations as required.

Hover: Click: Hover and click:

HTML used


This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.