CSS Button Image Hovering

**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 --

Code:

<!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 --

Code:

#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);
}

**coothead** · 04-25-2011, 02:03 PM

Hi there smudly,

check out the attachment to see a reworking of your navigation.

coothead
 

Thread: CSS Button Image Hovering

Thread Tools

Search Thread

CSS Button Image Hovering

Bookmarks

Bookmarks

Posting Permissions