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!