View Single Post
  #1 (permalink)  
Old 07-14-2008, 06:18 PM
SashaEndoh SashaEndoh is offline
Registered User
 
Join Date: Jul 2008
Posts: 1
CSS and Java Script Menu - need help!

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?!
Reply With Quote