getElementsByTagName returning an array of undefined elements

I'm stumped as to why this is happening. I'm just trying to do a simple rollover and adjust the position of the background image on each anchor tag. I am getting an error on each mouseover that the element has no properties. Any help would be greatly appreciated. Thanks in advance.

The markup:
<div id="header-wrapper">
<ul id="main-nav">
<li id="our-mission">
<a href="#">Our Mission</a>
</li>
<li id="insight-reviews">
<a href="#">Insight &amp; Reviews</a>
</li>
<li id="how-we-can-help">
<a href="#">How We Can Help</a>
</li>
<li id="who-we-are">
<a href="#">Who We Are</a>
</li>
<li id="tools-techniques">
<a href="#">Tools &amp; Techniques</a>
</li>
</ul>
<div style="clear:both;"></div>
</div>

The script:

function init(){
var els = document.getElementById("main-nav");
var links = els.getElementsByTagName("a");
var index = 0;

for(index; index < links.length; index++){
links[index].onmouseover = function(){
links[index].style.backgroundPosition = "bottom";
}
}
}

window.onload = init;

function init(){
var els = document.getElementById("main-nav");
var links = els.getElementsByTagName("a");
var index = 0;
for(index; index < links.length; index++){
links[index].onmouseover = function(){
this.style.backgroundPosition = "bottom";
}
}
}

...css?

Try this -CC

<ul id="main-nav">
<li id="our-mission">
<a href="#" onmouseover="alignIt(0)">Our Mission</a>
</li>
<li id="insight-reviews">
<a href="#" onmouseover="alignIt(1)">Insight &amp; Reviews</a>
</li> (etc...)

function alignIt(target){
var navs = document.getElementById("main-nav")
var links = navs.getElementsByTagName("a")
for(var i = 0; i < links.length; i++){
if(i == target){
links[i].style.backgroundPosition = "bottom"
}else{
links[i].style.backgroundPosition = "top"
}
}
}

stupid me, Bill is correct- css indeed:

a:hover { background-position: bottom; }

and that's all you need.