vertical menu with background image change on click but no page reload

I was wondering how to change the background image on a menu item with javascript without reloading the page. Then if you click another button on the menu the first button clicked would change back and then the second button would then become the one with the different background… here is my menu code:

[CODE]
<ul class=”menu”>
<li><a href=”/home” class=”imagelink lookA”><span>Home</span></a></li>
<li><a href=”/services”><span>Services</span></a></li>
<li><a href=”/about”><span>About</span></a></li>
<li><a href=”/contact”><span>Contact</span></a></li>
</ul>
[/CODE]

Here is my css code:

[CODE]
.menu{margin:0; padding:0; width:300px; list-style:none;background:rgb(255,255,255);}
.menu li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menu li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; ; display:block; background:url(‘../images/image1.jpg’) 0px 0px no-repeat; text-decoration:none; outline:none;}
.menu li a:hover{background:url(‘../images/image2.jpg’) no-repeat; }
.menu li a.active, .menu li a.active:hover{background:url(‘../images/image2.jpg’) no-repeat; }
.menu li a span{line-height:40px;}
[/CODE]

Thanks for the help!

Also in #JavaScript _↴