Onmouseover vs css hover (remembering last position)

JavaScript
1

So I have this vertical menu with a few options.
Originally it was pure CSS with a basic a:hover to change the background of the menu item.

But then it was decided that whichever menu item you last had your mouse on should remain in that hover state.

So I went ahead an busted out some Javascript. Now I’m not exactly talented with Javascript as it’s not one of my main languages.

This is what I came up with. Any kind of insight, improvements, suggestions would be greatly appreciated.

HTML


<div id="locations_menu">
	<ul>
		<li class="first" id="bb"><a href="#" onmouseover="trig('bb')">BB</a></li>
		<li id="trc"><a href="#" onmouseover="trig('trc')">TRC</a></li>
		<li id="mb"><a href="#" onmouseover="trig('mb')">MB</a></li>
		<li id="ch"><a href="#" onmouseover="trig('cf')">CH</a></li>
	</ul>
</div>

The Javascript



function trig(elid) {
	//Change the bg image for element with the current mousover
	document.getElementById(elid).style.background = 'url(images/click.png) center left no-repeat';

	//List of all the element ids (Can this be generated dynamically?)
	var names = ["bb", "trc", "mb", "ch"];

	//Need this because indexOf is incompatible with IE8
	if (!Array.prototype.indexOf) {
		Array.prototype.indexOf = function(obj, start) {
		     for (var i = (start || 0), j = this.length; i < j; i++) {
		         if (this[i] == obj) { return i; }
		     }
		     return -1;
		}
	}

	//Find the index of the element currently triggered by the mouseover
	var idx = names.indexOf(elid); //Find the index

	//Remove the element from the array
	if(idx!=-1) names.splice(idx, 1); //Remove it if found

	//For each element still left in the array make sure it's got the default background
	for (i=0;i<names.length;i++)
	{
		document.getElementById(names[i]).style.background = 'url(images/dot.png) center left no-repeat';
	}
}

THANKS!

2

Can I assume from the silence that the code and approach isn’t half bad?

3

This isn’t tested, but I would have approached it something like this. You could use class switching instead of assigning style rules:


function trig( elem ) 
{
 var menuLinks = elem.parentNode.getElementsByTagName( 'a' );
 
 elem.style.background = 'url(images/click.png) center left no-repeat';
 
 for( var i = 0, aLink; ( aLink = menuLinks[ i ] ); i++ )    
  if( aLink !== elem )
   aLink.style.background = 'url(images/dot.png) center left no-repeat';
}

<!-- Called thus -->

<a href="#" onmouseover="trig( this )">BB</a>