Solved

two state buttons

Posted on 2003-11-28
6
2,830 Views
Last Modified: 2012-06-27
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
Comment
Question by:ThG
6 Comments
 
LVL 14

Author Comment

by:ThG
ID: 9838935
sorry for typo
s/legaly/legacy/
0
 
LVL 1

Expert Comment

by:d0zerz
ID: 9839441
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
 
LVL 31

Accepted Solution

by:
seanpowell earned 75 total points
ID: 9839844
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
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.

 
LVL 14

Author Comment

by:ThG
ID: 9840574
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9840601
No problem on IE6 - now I see what you were trying to do - sorry I misconstrued the original intent :-(

Glad to have helped.
0
 
LVL 18

Expert Comment

by:CrYpTiC_MauleR
ID: 14996223
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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Wordpress plugins not working in html 3 39
Html Table Looping (part 2) 5 28
parse url to form? 7 26
jQuery Dialog Autoresize Bug 2 25
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question