Hi
I wished to create a project where I would have pictures of classic cars like the model T. and Stanley steamer with drop-down menus beneath them linking to stories about them on the Web. These pictures would be in separate div tags in the menus beneath them with their code not be in semantically related HTML. Another works these drop downs would be completely separate from each other. So I went looking for some good drop-down menu code on the Web and I thought I found it in keyboard accessible sucker fish drop downs. However the code used in ID attribute on the top-level unordered list tag in my project would have to use classes instead because I did not wish to read duplicate my JavaScript code attaching it to every ID of a separate drop-down menu. So I went looking for how to use classes instead of IDs in this code.

I thought I found a way of using classes instead of IDs when I found on the web the article about a JavaScript function called "The Ultimate getElementsByClassName." what this function would do for me was to deliver me an array of all the elements classed with a certain class. I could then create a loop that would loop through my code attaching it to all unordered list tags classed with the requisite Nav class tag for the drop-down code to work. So at first I try to do this with the somewhat complicated drop-down code of thekeyboard accessible sucker fish drop downs. However this was a little confusing to me so I instead try to figure it out with this simpler "Son of Suckerfish Dropdowns" code.

Were I am now is I can use a class instead of an ID if I explicitly code the JavaScript to pick up the first member of the class array. However if I loop through my code as is my plan it doesn't work. What follows is, my proof of principle, code with the offending code commented out and the class array member number change from a J variable to an explicit zero. Can someone tell me how to undo commented out code and get the loop to work. Any help would be greatly appreciated.

Sincerely
Marc

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Classes Son Sucker fish Single-level no loop</title>	
<script type="text/javascript" charset="utf-8">
function getElementsByClassName(oElm, strTagName, strClassName){
/*
Written by Jonathan Snook, http://www.snook.ca/jonathan
Add-ons by Robert Nyman, http://www.robertnyman.com	
*/
	var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
	var arrReturnElements = new Array();
	strClassName = strClassName.replace(/-/g, "\-");
	var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
	var oElement;
	for(var i=0; i<arrElements.length; i++){
		oElement = arrElements[i];
		if(oRegExp.test(oElement.className)){
			arrReturnElements.push(oElement);
		}
	}
	return (arrReturnElements)
}	
//for(var j=0;j<arrClassedNav.length;j++)
//{
		sfHover = function() {
			var sfEls = arrClassedNav[0].getElementsByTagName("LI");
			for (var i=0; i<sfEls.length; i++) {
				sfEls[i].onmouseover=function() {
					this.className+=" sfhover";
				}
				sfEls[i].onmouseout=function() {
					    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
				}
			}
		}
//}
window.onload=function(){
document	
arrClassedNav = getElementsByClassName(document, "ul", "nav");	
if (window.attachEvent) window.attachEvent("onload", sfHover);	
}
</script>	
<style type="text/css" media="screen">
.nav, .nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.nav a {
	display: block;
	width: 10em;
	}

.nav li {
	float: left;
	width: 10em;
	}

.nav li ul {
	position: absolute;;
	width: 10em;
	left: -999em;
}

.nav li:hover ul, .nav li.sfhover ul {
	left:auto;
	}
</style>
</head>

<body>
<ul class="nav">
	<li><a href="#">Percoidei</a>
		<ul>
			<li><a href="#">Remoras</a></li>
			<li><a href="#">Tilefishes</a></li>
			<li><a href="#">Bluefishes</a></li>
			<li><a href="#">Tigerfishes</a></li>
		</ul>
	</li>

	<li><a href="#">Anabantoidei</a>
		<ul>
			<li><a href="#">Climbing perches</a></li>
			<li><a href="#">Labyrinthfishes</a></li>
			<li><a href="#">Kissing gouramis</a></li>
			<li><a href="#">Pike-heads</a></li>
			<li><a href="#">Giant gouramis</a></li>
		</ul>
	</li>
</ul>
	
<div style="clear:both;"><br /><br ><br /></div>
<!------second dropdowns group begins here-------->

<!--
<ul class="nav">
	<li><a href="#">Percoidei</a>
		<ul>
			<li><a href="#">Remoras</a></li>
			<li><a href="#">Tilefishes</a></li>
			<li><a href="#">Bluefishes</a></li>
			<li><a href="#">Tigerfishes</a></li>
		</ul>
	</li>

	<li><a href="#">Anabantoidei</a>
		<ul>
			<li><a href="#">Climbing perches</a></li>
			<li><a href="#">Labyrinthfishes</a></li>
			<li><a href="#">Kissing gouramis</a></li>
			<li><a href="#">Pike-heads</a></li>
			<li><a href="#">Giant gouramis</a></li>
		</ul>
	</li>
</ul>
-->
</body>

</html>