Applying same event handler to multiple elements

[Dustin]

My intent is to implement a navigation menu that does rollovers and
changes the image when clicked (along with loading the new URL). I
know how to do all this using the mouse event handlers in the <img>
tag, but I wanted to compact the code a little. I have several
JavaScript functions (shown below) that take the (HTML) ID of the nav
button (Image) and perform an appropriate action. I was hoping
originally to use a CSS class to contain the onmouseover, onmouseout,
and onclick event handlers in order to apply them to each nav image,
since they would otherwise be the same for each, e.g.

<img id="nav_home" onclick="doNav(this.id)" ...>
<img id="nav_contents" onclick="doNav(this.id)" ...>
<img id="nav_links" onclick="doNav(this.id)" ...>

This apparently is not possible, and changing the CSS background-image
attribute using :hover does not provide the onclick behavior I desire.
Logically, the idea of placing event handlers within a class and
simply applying that class to multiple elements is very appealing,
since I would use the 'this' operator in calling the event handler to
provide element-specific behavior. This also results in code
reduction.
Is there a way to apply one event handler to several HTML elements, or
am I forced to (repititiously) specify the event handler in each tag?

Thanks,
Dustin

Please ignore minor syntax errors, as the code has not been tested.
The JS functions are not the focus, anyway.

------ Begin JS Content ------

var images = new Array(); //the images collection
var navs = new Array(); //the navigation URL collection
var currNav = "nav_home"; //The currently selected navigation item

//...populate images and navs collections...
//Keys for the navs collection look like 'nav_home', 'nav_links',
//etc., while each nav item has three images (with three
//corresponding keys), so keys for the images collection look
//like 'nav_home_blur', 'nav_home_hover', 'nav_home_focus'.

function mouseOver(id)
{
//only do rollovers for nav items other than the current one
if (currNav != id)
document.images[id].src = images[id + "_hover"];
}

function mouseOut(id)
{
//only do rollovers for nav items other than the current one
if (currNav != id)
document.images[id].src = images[id + "_blur"];
}

function doNav(id)
{
//cannot reselect the currently selected nav item
if (currNav != id)
{
//blur the previously selected navigation item
document.images[currNav].src = images[currNav + "_blur"];
//set the new navigation item as current
currNav = id;
//focus the new navigation item
document.images[currNav].src = images[currNav + "_focus"];
//navigate to the selected item
window.location = navs[currNav];
}
}

------ End JS Content ------