Change background of a button when button active

**inadcod** · 10-29-2008, 11:00 AM

Hello,

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">

<head>

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

}

//-->

</script>





<title>EXAMPLE PAGE</title>



</head>



<body>

     <div id="detail">

      <form>

       <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')"  />

      </form>

      <div class="tabsdet">

      <!-- HIDDEN INFORMATION TO BE SHOWN ONCLICK -->

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

       </div>

      <!-- END - HIDDEN INFORMATION TO BE SHOWN ONCLICK -->

     </div>



</body>

</html>

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

**rangana** · 10-29-2008, 11:34 AM

You can add highlighted:

Code:

<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:

Code:

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.

Thread: Change background of a button when button active

Thread Tools

Search Thread

Change background of a button when button active

Bookmarks

Bookmarks

Posting Permissions