inline js calls = bad?

[G Funk]

*** EDIT: I fixed it by making the attributes all lowercase (oops!) but I am still curious as to if this is the best method of doing this. ***

I added a javascript image rollover to my layout and I notice it is no long valid XHTML. The validator says that attributes onMouseOver and onMouseOut do not exist. Is it wrong to call js functions inline like that? Is there a better way to accomplish the intended effect?

The layout is here: http://www.corvettemanitoba.com/csslayout/

Also, there is a link to validate the page in the footer.

Here is the code for the navigation menu
*** Mixed case attributes have since been changed to all lowercase. ***

<!-- Nav Start -->
<div id="nav">
<div id="navpic"><img id="navimg" src="images/navoff.png" width="128" height="128" alt="Corvette Club Nav" /></div>
<ul>
<li><a href="/news/" title="Current Club News" onMouseOver="swapImage(1);" onMouseOut="swapImage(0);">&raquo; Current News</a></li>
<li><a href="/archives/" title="Archived Club News" onMouseOver="swapImage(2);" onMouseOut="swapImage(0);">&raquo; News Archives</a></li>
<li><a href="/events/" title="Club Events" onMouseOver="swapImage(3);" onMouseOut="swapImage(0);">&raquo; Events</a></li>
<li><a href="/media/" title="Club Media" onMouseOver="swapImage(4);" onMouseOut="swapImage(0);">&raquo; Media</a></li>
<li><a href="/historyabout/" title="Club History/About the Club" onMouseOver="swapImage(5);" onMouseOut="swapImage(0);">&raquo; History/About</a></li>
<li><a href="/memberarea/" title="Club Member-only Area" onMouseOver="swapImage(6);" onMouseOut="swapImage(0);">&raquo; Member Area</a></li>
<li><a href="/executive/" title="Club Executive" onMouseOver="swapImage(7);" onMouseOut="swapImage(0);">&raquo; Executive</a></li>
<li><a href="/links/" title="Corvette Links" onMouseOver="swapImage(8);" onMouseOut="swapImage(0);">&raquo; Links</a></li>
<li><a href="/contact/" title="Contact Us" onMouseOver="swapImage(9);" onMouseOut="swapImage(0);">&raquo; Contact</a></li>
<li><a href="/application/" title="Club Membership Application" onMouseOver="swapImage(10);" onMouseOut="swapImage(0);">&raquo; Application</a></li>
</ul>
</div>
<!-- Nav End -->


Here is the code from the external javascript file

rollImg = new Array();
rollImg[0] = new Image();
rollImg[0].src = "/images/navoff.png";
rollImg[1] = new Image();
rollImg[1].src = "/images/navcurrentnews.png";
rollImg[2] = new Image();
rollImg[2].src = "/images/navnewsarchive.png";
rollImg[3] = new Image();
rollImg[3].src = "/images/navevents.png";
rollImg[4] = new Image();
rollImg[4].src = "/images/navmedia.png";
rollImg[5] = new Image();
rollImg[5].src = "/images/navhistory.png";
rollImg[6] = new Image();
rollImg[6].src = "/images/navmemberarea.png";
rollImg[7] = new Image();
rollImg[7].src = "/images/navexecutive.png";
rollImg[8] = new Image();
rollImg[8].src = "/images/navlinks.png";
rollImg[9] = new Image();
rollImg[9].src = "/images/navcontact.png";
rollImg[10] = new Image();
rollImg[10].src = "/images/navapplication.png" ;

function swapImage(index){
document.getElementById("navimg").src = rollImg[index].src;
}

[agent002]

Well, you can also set the events from an actual <script> code, that is not always the best way to go though, as it can just make things harder.
<a href="http://www.google.com/" id="google_link">Google</a>

<script type="text/javascript">
document.getElementById('google_link').onclick = function(){
alert('You are about to go to Google!');
}
</script>
That would give an alert when you click the link.