...

View Full Version : CSS Button Image Hovering



Smudly
04-25-2011, 06:19 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);
}

Excavator
04-25-2011, 06:42 AM
Hello Smudly,
Have a look at this example - http://nopeople.com/CSS%20tips/h_ul_menu-with_images/index.html

bullant
04-25-2011, 06:48 AM
Maybe use this demo as a guide.

It sets the background colour of the current page's <li> to red. You can change the style to whatever you like.



<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
window.onload=function(){
var fileName = window.location.pathname.substring(window.location.pathname.lastIndexOf('\/')+1).split('.');
var menuLinks = document.getElementById('menuBar').getElementsByTagName('a');
for(i=0; i < menuLinks.length; i++){
if(menuLinks[i].href.indexOf(fileName[0]) != -1){
menuLinks[i].parentNode.style.backgroundColor = 'red'; //set current page style
i = menuLinks.length;
}
}
}
</script>
</head>
<body>
<ul id="menuBar">
<li><a 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>
</body>
</html>

johnktaylor
04-25-2011, 08:56 AM
You need to create the following class

#home_b. active{
background: url(images/home_blue.png);
width: 101px;
height: 37px;
display: block;
background-position: 0 0;
}


And call in the lists as:

<li><a href="index.php" class="active">Home</a></li>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum