View Full Version : Change background of a button when button active

10-29-2008, 11:00 AM

I have a webpage where I have four buttons.
when the page is loaded all you can see are the buttons but when you click a button a content appears, content which changes when clicked on another button. This is done by a siompel js script with an onClick command.

What I want to do is to change the background of the active button, I mean if I click on the first button, and see the content related to this button, then the button should have a different background.

All I managed to do so far is to change the background on hovering over the buttons, but it's just not enough for the visitors to know which content they are reading.

Please help!

Here is the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css" media="all"> @import "style.css";</style>
<script type="text/javascript">
var state = 'hidden';

function showhide(layer_ref) {

if (state == 'visible') {
state = 'hidden';
else {
state = 'visible';
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.visibility = state");
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].visibility = state;
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById(layer_ref);
maxwell_smart.style.visibility = state;
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }

<title>EXAMPLE PAGE</title>


<div id="detail">
<input type="button" class="tab" value="Content 1"
onClick="MM_showHideLayers('shtab1','','show','shtab2','','hide','shtab3','','hide','shtab4','','hide')" />
<input type="button" class="tab" value="Content 2"
onClick="MM_showHideLayers('shtab1','','hide','shtab2','','show','shtab3','','hide','shtab4','','hide')" />
<input type="button" class="tab" value="Content 3"
onClick="MM_showHideLayers('shtab1','','hide','shtab2','','hide','shtab3','','show','shtab4','','hide')" />
<input type="button" class="tab" value="Content 4"
onClick="MM_showHideLayers('shtab1','','hide','shtab2','','hide','shtab3','','hide','shtab4','','show')" />
<div class="tabsdet">
<div id="shtab1">
<p>This is the content that is associated with button 1</p></div>
<div id="shtab2">
<p>This is a different content associated with button 2</p></div>
<div id="shtab3">
<p>This is yet another different content associated with button 3</p></div>
<div id="shtab4">
<p>This content is related to button4</p></div>


and here is the CSS:
#detail input {display:inline; background:transparent url(img/title.png) repeat-x;
color:#fff; font-size:14px; font-weight:bold; border:none; height:25px; padding: 0 3px 0 3px;}
#detail input:hover{background:transparent url(img/activetitle.png) repeat-x;}
#shtab1, #shtab2, #shtab3, #shtab4 { position: absolute; top: 100px; left:30px; border:1px solid #99ccff; padding:10px;
background:transparent url(img/filtr.png) repeat; visibility: hidden;}
#shtab1 p, #shtab2 p, #shtab3 p, #shtab4 p{width:500px;}

10-29-2008, 11:34 AM
You can add highlighted:

<input type="button" class="tab" value="Content 1"
onClick="MM_showHideLayers('shtab1','','show','shtab2','','hide','shtab3','','hide','shtab4','','hide');ray.reset('tab','#00f');this.style.background='#930'" />

...and add this script:

var ray={ // Create an object
reset:function(classStr,defaultColor) // Reset function. Pass the class name of the input and the default color
var inputs=document.getElementsByTagName('input'); // Gets a collection of all the "input" elements
for(var i=0;i<inputs.length;i++) // Loops through all the input elements
if(inputs[i].className==classStr) // If matches the passed "classname"
inputs[i].style.backgroundColor=defaultColor; // Sets the color back to default
} // End of the for loop
} // End of the anonymous func

Hope that helps.