// JavaScript Document
/*
Usage:
set the div id as nav

<div id="nav" align="right">
	<a href="../includes/about.html"><img src="../images/navbar_about_us.gif" alt="" border="0" /></a>
	<a href="../includes/projects.html"><img src="../images/navbar_portfolio.gif" alt="" border="0" /></a>
	<a href="../includes/news.html"><img src="../images/navbar_news.gif" alt="" border="0" /></a>
	<a href="../includes/people.html"><img src="../images/navbar_people.gif" alt="" border="0" /></a>
	<a href=""><img src="../images/navbar_lplogin.gif" alt="" border="0" /></a>
	<img src="../images/navbar_bg_end.gif" alt="bar end" />
</div>

create both the image and the images ._omo.gif
example:
navbar_about_us.gif
navbar_about_us_omo.gif

*/

var W3CDOM = (document.createElement && document.getElementsByTagName);

var mouseOvers = new Array();
var mouseOuts = new Array();

window.onload = init;

function init()
{
	if (!W3CDOM) return;
	var nav = document.getElementById('nav');
	var imgs = nav.getElementsByTagName('img');
	for (var i=0;i<imgs.length;i++)
	{
		imgs[i].onmouseover = mouseGoesOver;
		imgs[i].onmouseout = mouseGoesOut;
		var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.'));
		mouseOuts[i] = new Image();
		mouseOuts[i].src = imgs[i].src;
		mouseOvers[i] = new Image();
		mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_omo" + suffix;
		imgs[i].number = i;
	}
}

function mouseGoesOver()
{
	this.src = mouseOvers[this.number].src;
}

function mouseGoesOut()
{
	this.src = mouseOuts[this.number].src;
}