...

View Full Version : Writing to a status bar within a page



Atlantis
08-14-2005, 07:19 PM
I was hoping someone might be able to help me out with an issue on a WIP of my site here: http://atlantis.plastiqueweb.com/2006.

I have a list of menu items at the top of the page, and what I want to do is that when a page is active, or when you roll the mouse over any of the buttons, a description concerning that page is to be displayed on the blue status bar underneath.

This area is contained within a DIV called "status_bar", and so I'd like some text to be written to this, taking on the properties as defined by the CSS. Is there a simple way of doing this that doesn't involve using javascript?


<h1>Atlantean Records</h1>
<div id="menu-container">
<ul>

<li><div class="ta-neteru">Ta-Neteru</div></li>
<li><a href="ambience.php" class="ambience" accesskey="a">Ambience</a></li>
<li><a href="civilisation.php" class="civilisation" accesskey="c">Civilisation</a></li>
<li><a href="contact.php" class="contact" accesskey="o">Contact</a></li>
<li><a href="links.php" class="links" accesskey="l">Links</a></li>
<li><a href="atlantis.php" class="atlantis" accesskey="n">Atlantis</a></li>

</ul>
</div>
<div id="status_bar"></div>

menu-container has the following image as its background:

http://atlantis.plastiqueweb.com/2006/images/layout/menu-background.png

status_bar has the following image as its background:

http://atlantis.plastiqueweb.com/2006/images/layout/status_bar.png


#menu-container {
height: 33px;
background: #EBEBEB url(../images/layout/menu-background.png) no-repeat;
}
#menu-container ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu-container ul li {
float: left;
display: block;
}
div.ta-neteru {
width: 117px;
height: 33px;
background: #EBEBEB url(../images/layout/ta-neteru-rollover.png) no-repeat;
font-size: 0;
}
a.ta-neteru {
width: 117px;
height: 33px;
background: #EBEBEB url(../images/layout/ta-neteru.png) no-repeat;
font-size: 0;
display: block;
}
a.ta-neteru:hover {
background: #EBEBEB url(../images/layout/ta-neteru-rollover.png) no-repeat;
}
div.ambience {
width: 112px;
height: 33px;
background: #EBEBEB url(../images/layout/ambience-rollover.png) no-repeat;
font-size: 0;
}
a.ambience {
width: 112px;
height: 33px;
background: #EBEBEB url(../images/layout/ambience.png) no-repeat;
font-size: 0;
display: block;
}
a.ambience:hover {
background: #EBEBEB url(../images/layout/ambience-rollover.png) no-repeat;
}
div.civilisation {
width: 117px;
height: 33px;
background: #EBEBEB url(../images/layout/civilisation-rollover.png) no-repeat;
font-size: 0;
}
a.civilisation {
width: 117px;
height: 33px;
background: #EBEBEB url(../images/layout/civilisation.png) no-repeat;
font-size: 0;
display: block;
}
a.civilisation:hover {
background: #EBEBEB url(../images/layout/civilisation-rollover.png) no-repeat;
}
div.contact {
width: 101px;
height: 33px;
background: #EBEBEB url(../images/layout/contact-rollover.png) no-repeat;
font-size: 0;
}
a.contact {
width: 101px;
height: 33px;
background: #EBEBEB url(../images/layout/contact.png) no-repeat;
font-size: 0;
display: block;
}
a.contact:hover {
background: #EBEBEB url(../images/layout/contact-rollover.png) no-repeat;
}
div.links {
width: 82px;
height: 33px;
background: #EBEBEB url(../images/layout/links-rollover.png) no-repeat;
font-size: 0;
}
a.links {
width: 82px;
height: 33px;
background: #EBEBEB url(../images/layout/links.png) no-repeat;
font-size: 0;
display: block;
}
a.links:hover {
background: #EBEBEB url(../images/layout/links-rollover.png) no-repeat;
}
div.atlantis {
width: 97px;
height: 33px;
background: #EBEBEB url(../images/layout/atlantis-rollover.png) no-repeat;
font-size: 0;
}
a.atlantis {
width: 97px;
height: 33px;
background: #EBEBEB url(../images/layout/atlantis.png) no-repeat;
font-size: 0;
display: block;
}
a.atlantis:hover {
background: #EBEBEB url(../images/layout/atlantis-rollover.png) no-repeat;
}
#status_bar {
height: 21px;
background: #FFFFFF url(../images/layout/status_bar.png) no-repeat;
}

Also, the pages are constructed from the following portion of main.inc.php - maybe I need to add the text descriptions at this point?


function menu_item($item, $text, $href, $key)
{
global $PHP_SELF;

switch (basename($PHP_SELF))
{
case "index.php":
$active_item = "ta-neteru";
break;
case "ambience.php":
$active_item = "ambience";
break;
case "civilisation.php":
$active_item = "civilisation";
break;
case "contact.php":
$active_item = "contact";
break;
case "links.php":
$active_item = "links";
break;
case "atlantis.php":
$active_item = "atlantis";
break;
default:
$active_item = "";
break;
}
echo " ";
if($item == $active_item)
{
echo " <li><div class=\"$item\">$text</div></li>\n";
}
else
{
echo " <li><a href=\"$href\" class=\"$item\" accesskey=\"$key\">$text</a></li>\n";
}
}

function header_()
{
echo "<span class=\"pre-load_images\">\n";
echo " <img src=\"images/layout/ta-neteru-rollover.png\" width=\"0\" height=\"0\" alt=\"Ta-Neteru\" />\n";
echo " <img src=\"images/layout/ambience-rollover.png\" width=\"0\" height=\"0\" alt=\"Ambience\" />\n";
echo " <img src=\"images/layout/civilisation-rollover.png\" width=\"0\" height=\"0\" alt=\"Civilisation\" />\n";
echo " <img src=\"images/layout/contact-rollover.png\" width=\"0\" height=\"0\" alt=\"Contact\" />\n";
echo " <img src=\"images/layout/links-rollover.png\" width=\"0\" height=\"0\" alt=\"Links\" />\n";
echo " <img src=\"images/layout/atlantis-rollover.png\" width=\"0\" height=\"0\" alt=\"Atlantis\" />\n";
echo " <img src=\"images/layout/navigation_button-rollover.png\" width=\"0\" height=\"0\" alt=\"Navigation button\" />\n";
echo " </span>\n";
echo " <h1>Atlantean Records</h1>\n";
echo " <div id=\"menu-container\">\n";
echo " <ul>\n";
menu_item("ta-neteru", "Ta-Neteru", "index.php", "t");
menu_item("ambience", "Ambience", "ambience.php", "a");
menu_item("civilisation", "Civilisation", "civilisation.php", "c");
menu_item("contact", "Contact", "contact.php", "o");
menu_item("links", "Links", "links.php", "l");
menu_item("atlantis", "Atlantis", "atlantis.php", "n");
echo " </ul>\n";
echo " </div>\n";
echo " <div id=\"status_bar\"></div>\n";
echo " <div id=\"atlantis-container\">\n";
echo " <div class=\"ta-neteru-overlay\"></div>\n";
echo " <div class=\"ambience-overlay\"></div>\n";
echo " <div class=\"civilisation-overlay\"></div>\n";
echo " <div class=\"contact-overlay\"></div>\n";
echo " <div class=\"links-overlay\"></div>\n";
echo " <div class=\"atlantis-overlay\"></div>\n";
echo " <div class=\"atlantis-right\"></div>\n";
echo " </div>\n";
}

I know this is probably quite a big issue, but any help or reference links would be appreciated.

mark87
08-14-2005, 09:25 PM
I'm not sure if there's a CSS solution.

I know you can change content with innerHTML. So you could have something like this -

<div id="status_bar">
<p id="status_text"></p>
</div>

And use JavaScript to change the content with a function -

<script type="text/javascript">
function changeStatus(status){
document.getElementById("status_text").innerHTML = status;
}
</script>

Add mouseover property to links -

<li><a href="ambience.php" class="ambience" accesskey="a" onmouseover="changeStatus('Ambience')">Ambience</a></li>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum