Automated image rollover script

Navigation

Skip navigation.

Site search

Site navigation

• How To Create home
• JavaScript libraries
• Script license

Details and download

• Automated image rollover and click script

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

• The following HTML/JavaScript is put inside the document head:

  <script type="text/javascript">
  var a = new Image(); a.src = 'root.gif';
  var b = new Image(); b.src = 'hover.gif';
  var c = new Image(); c.src = 'active.gif';
  </script>

• Regular image:

  <img src="root.gif" height="50" width="50" alt="" border="0">

• Hover:

  <a href="whatever" onmouseover="document.images['s1a'].src='hover.gif';" onmouseout="document.images['s1a'].src='root.gif';"><img src="root.gif" name="s1a" height="50" width="50" alt="" border="0"></a>

• Click:

  <a href="whatever" onmouseout="document.images['s2a'].src='root.gif';" onmousedown="document.images['s2a'].src='active.gif';" onmouseup="document.images['s2a'].src='root.gif';"><img src="root.gif" name="s2a" height="50" width="50" alt="" border="0"></a>

• Hover and click:

  <a href="whatever" onmouseover="document.images['s3a'].src='hover.gif';" onmouseout="document.images['s3a'].src='root.gif';" onmousedown="document.images['s3a'].src='active.gif';" onmouseup="document.images['s3a'].src='hover.gif';"><img src="root.gif" name="s3a" height="50" width="50" alt="" border="0"></a>

Assessment

• Advantages:

  • Works in all 4^th generation and higher browsers
  • No CSS support is required
  • No accessibility problems - lesser browsers will use either the basic image or the alt attribute

• Disadvantages

  • Requires JavaScript support
  • Requires knowledge of how event handlers interact
  • JavaScript syntax must be perfect or the effect will not work
  • For full 4^th generation browser support, the images must be inside a link - the effect will work inside any element, or with images alone if the event handlers are attached directly to the image, but this would then loose support for layers browsers (like Netscape 4 - if you care ...)
  • Images need to be cached manually first - this is often neglected by inexperienced programmers causing a delay in the playing of the effect
  • With multiple rollovers using different images, the caching script can easily become unmanageably large

CSS

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

• The following (example) HTML/CSS/JavaScript is put inside the document head:

  <style type="text/css">
  a.doImg { display: block; height: 50px; width: 50px; background-image: url(root.gif); text-decoration: none; }
  a.doHov:hover { background-image: url(hover.gif); }
  body a.doAct:active { background-image: url(active.gif); }
  /* lots of other stuff to make it line up correctly with the text
  display: inline-block; is not well supported, so I use multiple float/clears */
  </style>
  <script type="text/javascript">
  var a = new Image(); a.src = 'root.gif';
  var b = new Image(); b.src = 'hover.gif';
  var c = new Image(); c.src = 'active.gif';
  </script>

• Regular image:

  <a href="whatever" class="doImg">&nbsp;</a>

• Hover:

  <a href="whatever" class="doImg doHov">&nbsp;</a>

• Click:

  <a href="whatever" class="doImg doAct" onclick="if(this.blur){this.blur();}">&nbsp;</a>

• Hover and click:

  <a href="whatever" class="doImg doHov doAct" onclick="if(this.blur){this.blur();}">&nbsp;</a>

Assessment

• Advantages

  • No JavaScript support is required (although it is desirable for caching images and click focus management)
  • Once the ugly CSS and JavaScript gets out of the way, the HTML required is actually quite simple

• Disadvantages

  • Requires advanced CSS support - this will only work in 5^th generation browsers, and will not even work properly in some of those
  • Requires knowledge of how to use advanced CSS
  • Can only be applied to links to ensure the effect works cross browser (Internet Explorer 6- only understands the pseudo classes on links)
  • Because the element used is a link, and not an image, there is no accessibility support - images have alt attributes, links do not - lesser browsers and text readers will simply see nothing (without a lot of work)
  • The locations of the images needs to be stored in a stylesheet, away from where they are being used, so the author needs to keep track of what images are used where and when
  • With multiple rollovers using different images, the stylesheet can easily become unmanageably large
  • In order to make the click effect work properly in major browsers, the focus must be removed from the link immediately, which causes significant accessibility problems, and requires JavaScript
  • JavaScript should be used to cache images to prevent delays in the playing of the effect - this can be done with CSS tricks, but this in itself is quite difficult, as some browsers do not load images in hidden elements

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

• The following HTML is put just before the </body> tag:

  <script type="text/javascript" src="imgRoll.js"></script>

• Regular image:

  <img src="root.gif" height="50" width="50" alt="" border="0">

• Hover:

  <img src="root.gif" hoversrc="hover.gif" height="50" width="50" alt="" border="0">

• Click:

  <img src="root.gif" activesrc="active.gif" height="50" width="50" alt="" border="0">

• Hover and click:

  <img src="root.gif" hoversrc="hover.gif" activesrc="active.gif" height="50" width="50" alt="" border="0">

• Hover and click on an image input:

  <input type="image" src="root.gif" hoversrc="hover.gif" activesrc="active.gif" height="50" width="50" alt="" border="0">

Assessment

• Advantages

  • No CSS support is required
  • Syntax used is as simple as it is possible to be
  • Images are automatically cached as necessary
  • Event handlers are attached to the images, not links, so the image could be anywhere, not just inside a link
  • No accessibility problems - lesser browsers will use either the basic image or the alt attribute
  • No knowledge of JavaScript is required by the page author. At all.
  • Even works with image inputs

• Disadvantages

  • Requires JavaScript support (non-JavaScript browsers will just show the basic image), but will work in all 5^th generation browsers, as well as a few 4^th generation ones (not Netscape 4 - if you care ...)
  • Pages will not validate according to HTML validators, but as HTML is supposed to be extensible (take XHTML for example), all I am doing is extending it correctly - this may not be valid core HTML 4, but it is a valid practice