English
Sat, 14/05/2005 - 23:54

JavaScript: Image rollover 

This article was first written in May 2005 for the BeezNest technical
website (http://glasnost.beeznest.org/articles/258).

Description

Allow to implement images rollovers by simply defining the images of a specific CSS class. Then you only have to call the function "rollover_register()" and pass it the optional parameters:
  • the CSS class you want to trigger. Default: "img.rollover".
  • the pattern you want to add to the original image (e.g.: image.png and image.over.png). Default: ".over".
  • the handler function for onMouseOver. Default: "rollover_over_handler".
  • the handler function for onMouseOut. Default: "rollover_our_handler".

Code

var rollover_pattern = '.over';

function rollover_register(selector, pattern, over, out)
{
        if (isNaN(selector)) selector='img.rollover';
        if (!isNaN(pattern)) rollover_pattern=pattern;
        if (isNaN(over)) over='rollover_over_handler';
        if (isNaN(out)) out='rollover_out_handler';
        elems=document.getElementsBySelector(selector);
        for (var i=0;i<elems.length;i++){
                addEvent(elems[i],'mouseover',eval(over));
                addEvent(elems[i],'mouseout',eval(out));
        }
}

function rollover_over_handler(e)
{
        // get the source element in a cross-browser way
        if (window.event) {
                img=window.event.srcElement;
        } else if (e.target) {
                img=e.target;
        } else {
                return;
        }
        img.src=img.src.replace(/(.[a-z]+)$/i,rollover_pattern+'$1');
}

function rollover_out_handler(e)
{
        // get the source element in a cross-browser way
        if (window.event) {
                img=window.event.srcElement;
        } else if (e.target) {
                img=e.target;
        } else {
                return;
        }
        re=new RegExp(rollover_pattern.replace('.', '.')+'(\.[a-z]+)$', 'i');
        img.src=img.src.replace(re,'$1');
}

Dependencies

  • addEvent()
  • getElementsBySelector()

Usage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <title>Image Rollover</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
        <script src="../events.js" language="JavaScript" type="text/javascript"></script>
        <script src="../getElementsBySelector.js" language="JavaScript" type="text/javascript"></script>
        <script src="../rollover.js" language="JavaScript" type="text/javascript"></script>
        <script language="JavaScript" type="text/javascript">
        addEvent(window, 'load', function _init() { rollover_register(); });
        </script>
</head>

<body>
<img src="image.gif" class="rollover" alt="image" />
</body>
</html>