how do I add a generic function to multiple html elements?

Hi

I have a page with 100+ links which I want to hide the address in the status bar when the user hovers their mouse over. Is there a way, perhaps using addEventListener/attachevent, that I can assign functions for onMouseOver and onMouseOut for all 'a' elements ?

Any help would be much appriciated.

Thanks,
Joe

 

I prefer to use jQuery for all JS coding, I think the extra 20k is worth it.

If you have jQuery included this is simple:

jQuery(document).ready(function () {
     jQuery('a').hover(function {
          alert("Mouseover");
     }, function () {
          alert("Mouseout");
     });
});

Code (markup):

jQuery's hover function takes 2 arguments: the first is the function to run on mouseover, the second is the function to run on mouseout. I've written in placeholder function inline in my example, but you can specify function names to be defined elsewhere if you prefer.

jQuery Docs on hover():

http://docs.jquery.com/Events/hover

Hope that helps.

 

standard frameworks are good choice, but you can find more different methods at http://javascriptbank.com/javascript/link-javascript.html

 

Thanks for the suggestions. JQuery looks interesting, but a bit too overkill for what I need I think.

I have found this code:

//----------------------------------------------------------
// Attaches a function to the event of specified object
// @param obj the object the event is being attached to
// @param eventType the event type (e.g. "load") - do not include "on" as in "onload"!
// @param fn the function to attach
//----------------------------------------------------------
function addEvent(obj, eventType, fn)
{
	if (obj.addEventListener)
	{
		obj.addEventListener(eventType, fn, true);
		return true;
	}
	else if (obj.attachEvent)
	{
		var r = obj.attachEvent("on" + eventType, fn);
		return r;
	}
	else
	{
		return false;
	}
}
//--------------------------------------------------------------------
// Make status bar display all titles on links.
//--------------------------------------------------------------------
addEvent(window, "load", function(){

	alert( "here" );

	for(var i=0,limit=document.links.length ;i<limit;i++)
	{
		addEvent(document.links[i], "mouseover", setStat("Buy this mp3 now") );
		addEvent(document.links[i], "mouseout", setStat("") );
	}
});
 
function setStat(s)
{
	return function()
	{
		window.status=s;
		window.defaultstatus=s;
		
		return true;
	}
}

Code (markup):

However, it only works in IE and not Firefox. Anyone have any ideas why ?

Thanks,
Brew