Applying same event handler to multiple elements



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(" ...>
<img id="nav_contents" onclick="doNav(" ...>
<img id="nav_links" onclick="doNav(" ...>

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
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?


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 ------

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Latest member

Latest Threads