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

willCrain

New Member

Join Date: Feb 2008
Posts: 1

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

Feb 24 '08, 05:15 AM

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:

Code:

/* 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;}

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

Code:

<?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.

Tags: None

mrking

New Member

Join Date: Feb 2008
Posts: 28

Mar 7 '08, 02:46 AM

You need to use something more like this:

Code:

.companyrollover a{
    display: block;
    width: 95px;
    height: 20px;
    background: url(image-name.jpg) no-repeat;
    text-decoration: none;
    float: left;
         }
 
.companyrollover a:hover {
    background-position: -95px 0;
           }

.companyrollover a:current{
	background-position: -190px 0;
	}

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

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

Comment