By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,763 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

2 buttons acting at once - css and php - maybe javascript?

P: 1
I am pretty much stuck and dont know which direction to procede in figuring this out. My desired end result is to have top_home button and bottom_home button to be on opposite areas of the page, but when I rollover top_home or bottom_home the other reacts with thier own roll over state as though they are just one button. (rollover 1 and both activate the rollover state) Of course I cant have just one large button layingg over the entire page because all of the space in between would be dead then and useless. Also, the buttons are different in that

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
  1. /* Bottom Nav */
  2. #topNav {position:absolute; top:0; left:30px;}
  3. #topNav li {float:left; margin-right:10px;}
  4. #topNav li.home a {background:url(../images/top_home.png) no-repeat; width:116px; height:22px;}
  5. #topNav li a:hover {background-position:bottom;}
  6. #topNav li a.current, #topNav li a.current:hover {background-position:bottom;}
  7.  
  8. /* Bottom Nav */
  9. #bottomNav {position:absolute; bottom:34px; right:0;}
  10. #bottomNav li {float:left; margin-left:5px;}
  11. #bottomNav li.home a {background:url(../images/bottom_home.png) no-repeat; width:144px; height:27px;}
  12. #bottomNav li a:hover {background-position: 0 -27px}
  13. #bottomNav li a.current, #bottomNav li a.current:hover {background-position:bottom;}
  14.  
  15.  
If its not obvious.
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
  1. <?php
  2. #debug function
  3. function debug ($array,$die = false) {
  4.     echo "<pre>";
  5.     print_r($array);
  6.     echo "</pre>";
  7.     if($die) {
  8.         die();
  9.     }
  10. }
  11.  
  12. #debug($_SERVER);
  13. #figure out file name
  14. $url = $_SERVER['SCRIPT_NAME'];
  15.  
  16. if(preg_match('/clients/',$url)) {
  17.     $clients = true;
  18. }
  19. elseif(preg_match('/contact/',$url)) {
  20.     $contact = true;
  21. }
  22. elseif(preg_match('/portfolio/',$url)) {
  23.     $portfolio = true;
  24. }
  25. elseif(preg_match('/index/',$url)) {
  26.     $home = true;
  27. }
  28. ?>
  29.  
  30. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  31. <html xmlns="http://www.w3.org/1999/xhtml">
  32.  
  33. <head>
  34. <meta name="Copyright" content="" />
  35. <meta name="Author" content="" />
  36. <meta name="Description" content="" />
  37. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
  38. <title>TITLE <?php echo isset($title) ? $title : '';?></title>
  39. <link href="/includes/style.css" rel="stylesheet" type="text/css"/>
  40. <script language="javascript">AC_FL_RunContent = 0;</script>
  41. <script src="AC_RunActiveContent.js" language="javascript"></script>
  42. </head>
  43.  
  44. <body>
  45.  
  46. <div id="topNav">
  47.         <ul>
  48.             <li class="home"><a href="/index.php" <?php if(!empty($home)) echo 'class="current"';?>>Home</a></li>
  49.         </ul>
  50.     </div><!-- topNav -->
  51.  
  52.     <div id="bottomNav">
  53.         <ul>
  54.             <li class="home"><a href="/index.php" <?php if(!empty($home)) echo 'class="current"';?>>Home</a></li>
  55.         </ul>
  56.     </div><!-- bottomNav -->
  57.  


Hope this is clear. Thanks for any help.
Feb 24 '08 #1
Share this Question
Share on Google+
1 Reply


P: 28
You need to use something more like this:

Expand|Select|Wrap|Line Numbers
  1. .companyrollover a{
  2.     display: block;
  3.     width: 95px;
  4.     height: 20px;
  5.     background: url(image-name.jpg) no-repeat;
  6.     text-decoration: none;
  7.     float: left;
  8.          }
  9.  
  10. .companyrollover a:hover {
  11.     background-position: -95px 0;
  12.            }
  13.  
  14. .companyrollover a:current{
  15.     background-position: -190px 0;
  16.     }
  17.  
  18.  
Mar 7 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.