CSS Button Image Hovering [Archive]

smudly

04-25-2011, 04:22 AM

I'm working on creating a top Navigation that has 6 Buttons along the top.
Home - Account - FAQs - Tips - Forum - Contact.

Each of the buttons are PNG images. The original image displayed is Orange. When hovered over, it turns Blue.
I now need to figure out how to keep one of the buttons Blue IF on that current page. So for example:

The user is on the Home page. This "Home" button should be the blue image while on the page.

You can see the example page I'm working on here:
http://tinyurl.com/44dzkwf

And my code here:
-- HTML below --

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title> Test </title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="menu">
<div id="menu_l"></div>
<div id="menu_r"></div>
<ul>
<li><a class="homebutton" href="index.php">Home</a></li>
<li><a href="members.php">Account</a></li>
<li><a href="faq.php">FAQs</a></li>
<li><a href="tips.php">Tips</a></li>
<li><a href="forum.php">Forum</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>

</body>
</html>

-- CSS below --

#menu{
height:37px;
margin:0 8px;
background:url(images/menu_bg.png);
position:relative;
}
#menu_l, #menu_r{
position:absolute;
width:8px;
height:37px;
top:0;
}
#menu_l{
left:-8px;
background:url(images/menu_l.png);
}
#menu_r{
left:100%;
background:url(images/menu_r.png);
}
#menu ul{
margin-left:170px;
list-style:none;
}
#menu li{
display:inline;
}
#menu a{
float:left;
line-height:37px;
height:37px;
}
#menu .current a{

border:none !important;
}
.homebutton {
display: block;
width: 101px;
height: 37px;
background: url('images/home_orange.png') bottom;
text-indent: -99999px;
}
.homebutton:hover {
background-position: 0 0;
background:url(images/home_blue.png);
}