CSS and Java Script Menu - need help!

[SashaEndoh]

I'm working on something that is probably very simple, but i'm a newbie with Java scrip.
Here's the CSS:

/* Menu*/
#menu {
float: right;
list-style: none;
padding: 0;
margin: 0;
width: 161px;
height: 160px;
background: transparent;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -1000%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span {
display: block;
}

#menu .about {
width: 161px;
height: 34px;
background: url(images/About.png) no-repeat;
left: 0px;
top: 0px;
}

#menu .about span {
width: 161px;
height: 34px;
background: url(images/AboutOver.png) no-repeat;
left: 0px;
top: 0px;
}

#menu .news {
width: 161px;
height: 41px;
background: url(images/News.png) no-repeat;
left: 0px;
top: 34px;
}

#menu .news span {
width: 161px;
height: 41px;
background: url(images/NewsOver.png) no-repeat;
left: 0px;
top: 0px;
}

#menu .music {
width: 161px;
height: 37px;
background: url(images/Music.png) no-repeat;
left: 0px;
top: 75px;
}

#menu .music span {
width: 161px;
height: 37px;
background: url(images/MusicOver.png) no-repeat;
left: 0px;
top: 0px;
}

#menu .contact {
width: 161px;
height: 48px;
background: url(images/Contact.png) no-repeat;
left: 0px;
top: 112px;
}

#menu .contact span {
width: 161px;
height: 48px;
background: url(images/ContactOver.png) no-repeat;
left: 0px;
top: 0px;
}

and the HTML:

<div id="menu">
<ul id="menu">
<li><a href="About.htm" class="about">About <span></span></a></li>
<li><a href="News.htm" class="news">News <span></span></a></li>
<li><a href="Music.htm" class="music">Music <span></span></a></li>
<li><a href="Contact.htm" class="contact">Contact <span></span></a></li>
</ul>
</div>

Ok, so what I want to do is add Java script so that (for example) when i click on "About" the image in the menu is "AboutOver" not the original "About" image.... Basically, just a way for people to tell which page they're on.

I don't know much of anything about Java script, though i know it all has something to do with the onClick....

Help please?!

[Leprakawn]

Something like this?

<a href="the-page-you-desire.htm" onmouseover="document.Buddy_Holly.src='file/name-mo.jpg'" onmouseout="document.Buddy_Holly.src='file/name-me.jpg'"> 
<img src="file/name-me.jpg" name="Buddy_Holly" alt="Alternate txt goes here" /> 
</a>

To analyze this:

href="" is what you are linking to
onmouseover="" is the mouseover effect, or the img you will see when the mouse is over that img. KEY NOTE: Make sure to give your imgs different names, and use those names in the document.**.src section. And the src is where these other imgs are located.

onmouseout is what you will see when the mouse leaves the button. Of course you could get a little fancy and have an onmouseup="" applied to it (same coding within quotes), to make it even more interactive.

That is my 02˘ for the night.

[curtiss]

The way you have it set up right now, you don't need javascript to accomplish what you want. You just need CSS.

Look into the :hover property.

#menu .about {
width: 161px;
height: 34px;
background: url(images/About.png) no-repeat;
left: 0px;
top: 0px;
}

#menu .about span {
width: 161px;
height: 34px;
background: url(images/AboutOver.png) no-repeat;
left: 0px;
top: 0px;
}

Would become:

#menu a.about {
width: 161px;
height: 34px;
left: 0px;
top: 0px;
}

#menu a.about:link, #menu a.about:visited {
background: url(images/About.png) no-repeat;
}

#menu a.about:hover {
background: url(images/AboutOver.png) no-repeat;
}