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>