JS changing CSS background image

[sam150]

What I am trying to do is when a button is clicked in a link I want to run a function, which will change the background image of a div ID in an external CSS file in order to show the over state image.

Before I have just used the css a:hover method but want to try a different way.

So far I have this:

HTML

<a href="index.html" id="indexLink" onclick="indexNavBar()">Home</a>

External CSS

#navBar{
		background-image:url(../html/images/navBar/navBar.jpg); <--- bit i want to change
}

External JS

Done a bit more reading and and came up with this but it aint working.

function indexNavBar(){
	var imagePath = document.getElementById("navBar").style.backgroundImage;
	
	if (imagePath == "url(../html/images/navBar/navBar.jpg)")
	{
		document.getElementById("navBar").style.backgroundImage = "url(../html/images/navBar/homeOver.jpg)";
	} else {
			document.getElementById("navBar").style.backgroundImage = "url(../html/images/navBar/navBar.jpg)";
		   }	
}