Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2890
  • Last Modified:

two state buttons

Greetings
I was wondering if it is possible to create a two state button in HTML (+css+javascript, if needed). I don't have any legaly compatibility limitation so anything will do.

I think you know what i'm talking about, anyway as behaviour it's something like the input type=checkbox but... it's a button.
Only quick code or keywords needed.
0
ThG
Asked:
ThG
1 Solution
 
ThGAuthor Commented:
sorry for typo
s/legaly/legacy/
0
 
d0zerzCommented:
This should do the trick:


<script language="javascript">
var bState = false;

function changeState(rButton) {
  if (bState == false) {
    bState = true;
    rButton.style.background="#FF0000"
  }
  else if (bState == true) {
    bState = false;
    rButton.style.background="#0000FF"
  }
}

</script>

<input name="button1" style="background:#0000FF;" type="button" value="clickme" onClick="javascript:changeState(this);">

If you need it saving to a database, i'd suggest using a html hidden value, changing that with the buttonclick.

Keep in mind you could change anything with the button click, not just background color :)
0
 
seanpowellCommented:
Here's a two-state button without javascript, just CSS:

<html>
<head>
<title>Rollover Buttons</title>
<style media="screen" type="text/css">
<!--
#cssrollovers   { background-color: #FFCC66; padding: 8px; border: solid 1px #000; width: 200px; }
.button         { font-weight: bold; text-align: center; }
.button a       { color: #000000; text-decoration: none; background-color: #CCCCCC; display: block; padding: 4px; border-style: solid; border-width: 2px; border-color: #dcdcdc #696969 #696969 #dcdcdc; width: 180px; }
.button a:hover { background-color: #EEEEEE; border-style: solid; border-width: 2px; border-color: #696969 #dcdcdc #a9a9a9 #696969; }
//-->
</style>
</head>
<body bgcolor="#ffffff">
<div id="cssrollovers">
<p class="button"><a href="http://www.experts-exchange.com">Experts Exchange</a></p>
<p class="button"><a href="http://www.google.com">Google</a></p>
</div>
</body>
</html>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
ThGAuthor Commented:
Hi georgemarian!
You answer has been indeed enlightening. I worked it out a little an I ended up with this, which is exactly what i want. It works well on Mozilla 1.5 and quite well on konqueror. I'd like to hear how it works on IE. Thank you.
Thanks to d0zerz as well for his answer.


<html>
<head>
<title>Two state buttons -- ThG at Experts-Exchange.com 20031129</title>
<style type="text/css">
  .button { color: #000000; text-align: center; text-decoration: none; font-weight: bold;
            background-color: #CCCCCC; display: block; padding: 4px; border-style: solid;
            border-width: 2px; border-color: #dcdcdc #696969 #696969 #dcdcdc;
            width: 180px; cursor: pointer; }
  .button_p { color: #000000; background-color: #EEEEEE; text-align: center;
              text-decoration: none; font-weight: bold;  display: block; padding: 4px;
              border-style: solid; border-width: 2px;
              border-color: #696969 #bbbbbb #bbbbbb #696969; width: 180px; cursor: pointer; }
</style>
<script type="text/javascript">
function toggle(xid) {
  if (xid.className == 'button') xid.className = 'button_p';
  else xid.className = 'button';
}
</script>
</head>
<body bgcolor="#ffffff">
<table border=1 cellpadding=10 bgcolor="#ffcc66">
<tr><td><div class="button" onclick="toggle(this)">Push button 1</div></td></tr>
<tr><td><div class="button" onclick="toggle(this)">Another option</div></td></tr>
</table>

</body>
</html>
0
 
seanpowellCommented:
No problem on IE6 - now I see what you were trying to do - sorry I misconstrued the original intent :-(

Glad to have helped.
0
 
CrYpTiC_MauleRCommented:
ThG could you please email me using the email in my profile. If you are not busy I would like you to join a PHP development team. Most off EE's top PHP experts are already part of it. Thanks!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now