473,324 Members | 1,678 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

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

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
1 1257
mrking
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

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

Similar topics

2
by: bbxrider | last post by:
i have 2 radio buttons 1 for yes and 1 for no, it is mandatory for one to be checked, and am purposely leaving both blank on the page when i tested for .value, when neither was checked, an alert...
3
by: Jason | last post by:
I have two applications that I wrote that use asp and javascript source files. Recently both of these applications starting acting strange on my test box. Image icons will randomly stop showing...
7
by: Jairo Nieto | last post by:
Hi, I've had this extremely weird problem for a week or so, and havent been able to solve it. My solution works fine on the production server. Once I deploy it, all buttons stop posting back...
6
by: pmud | last post by:
Hi, I have created a very simple ASP.NET application which has a couple of ImageButtons which go to different SQL reports on clicking them. I have used Response.Redirect to send the user to the ...
1
by: Bill_W_Stephens | last post by:
I have a complicated page with several submit buttons. I don't want to create multiple forms because much of the input is shared and the code is getting very ugly. However I would like to determine...
22
by: Saul | last post by:
I have a set of radio buttons that are created dynamically, after rendered I try loop thru this set by getting the length of the set, but I keep getting an error stating the element is undefined. I...
6
by: shror | last post by:
i want to add a midi file to my pages and i want to put two radio buttons so that on is on and the other is off so that the users can start or stop the file playing by choosing one of the radio...
7
by: moksha | last post by:
Hi, I am new to javascript and i am facing a problem in coding. plz help me out. I am using javascript for dynamically creating a table row which contains text boxes and radio...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.