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>