CS5 Spry Menu Question

Question

Aloha,
I have the menu configured that way i want it, but for the life of me I cant figure out how to do the following.
I have a menu   home, about, contact etc.........  The menu bar has two background images, one when you load the page and then the mouse over image. What i want to do is when your on the index.html page , the Menu link will be lite up in my case (blue)  and then if you go off of that page the blue will go to the current page that is up on your screen.
I am not great with code, I have spent a few hours tring to figure it out, i have no idea if it can do that or not, but its prob super easy, I just dont know what setting i am looking for.
2ns Question.. Is there a way to make the Spry menu to look like this?    HOME    |   ABOUT     |      ETC
Right now i dont have the | in there, not sure if its possable
Aloha!

Answer 1

Thank you for posting your URL, this should be done as a matter of course.
You do need to have SpryDOMUtils.js uploaded to your SpryAssets folder for the script to work.
The following explains the working of the script
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){ // check each li within a region with an ID of MenuBar1
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){ // if the href is the same as the current window location e.g. index.html
        Spry.Utils.addClassName(node,"activeMenuItem"); // add a class called activeMenuItem
As soon as a class is added, CSS will take care of the styling. In the case that I have suggested, the CSS merely changes the background colour. This could just as happily be a background image.
If you want a different image for each menu item, then assign a class to the menu item as in
<li><a href="index.html">Home</a></li>
<li><a href="home-services.html" class="red">Home Services</a></li>
<li><a href="business-services.html">Business Services</a></li>
<li><a href="web-hosting.html">Web Hosting</a></li>
<li><a href="online-backup.html">Online Backup</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
The style rule could then be
.red .activeMenuItem {  background: url(home-button.png); }
Cheers,
Gramps