top_home has 2 states [current state1 and roll over state]
bottom_home has 3 states [current state1, current state 2 and roll over state]
.css file:
Expand|Select|Wrap|Line Numbers
- /* Bottom Nav */
- #topNav {position:absolute; top:0; left:30px;}
- #topNav li {float:left; margin-right:10px;}
- #topNav li.home a {background:url(../images/top_home.png) no-repeat; width:116px; height:22px;}
- #topNav li a:hover {background-position:bottom;}
- #topNav li a.current, #topNav li a.current:hover {background-position:bottom;}
- /* Bottom Nav */
- #bottomNav {position:absolute; bottom:34px; right:0;}
- #bottomNav li {float:left; margin-left:5px;}
- #bottomNav li.home a {background:url(../images/bottom_home.png) no-repeat; width:144px; height:27px;}
- #bottomNav li a:hover {background-position: 0 -27px}
- #bottomNav li a.current, #bottomNav li a.current:hover {background-position:bottom;}
The button image is made up of the multiple states in the one image. 2 button states one on top of the another in the case of top_home and 3 states in the same image in the case of bottom_home. The .css tells the button, depending upon which page is being displayed to move the image up or down to reviel that state.
basically image looks like this:
top_home:
HOME
HOME
bottom_home:
HOME
HOME
HOME
html/PHP code
Expand|Select|Wrap|Line Numbers
- <?php
- #debug function
- function debug ($array,$die = false) {
- echo "<pre>";
- print_r($array);
- echo "</pre>";
- if($die) {
- die();
- }
- }
- #debug($_SERVER);
- #figure out file name
- $url = $_SERVER['SCRIPT_NAME'];
- if(preg_match('/clients/',$url)) {
- $clients = true;
- }
- elseif(preg_match('/contact/',$url)) {
- $contact = true;
- }
- elseif(preg_match('/portfolio/',$url)) {
- $portfolio = true;
- }
- elseif(preg_match('/index/',$url)) {
- $home = true;
- }
- ?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta name="Copyright" content="" />
- <meta name="Author" content="" />
- <meta name="Description" content="" />
- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
- <title>TITLE <?php echo isset($title) ? $title : '';?></title>
- <link href="/includes/style.css" rel="stylesheet" type="text/css"/>
- <script language="javascript">AC_FL_RunContent = 0;</script>
- <script src="AC_RunActiveContent.js" language="javascript"></script>
- </head>
- <body>
- <div id="topNav">
- <ul>
- <li class="home"><a href="/index.php" <?php if(!empty($home)) echo 'class="current"';?>>Home</a></li>
- </ul>
- </div><!-- topNav -->
- <div id="bottomNav">
- <ul>
- <li class="home"><a href="/index.php" <?php if(!empty($home)) echo 'class="current"';?>>Home</a></li>
- </ul>
- </div><!-- bottomNav -->
Hope this is clear. Thanks for any help.