Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

two state buttons

Posted on 2003-11-28
6
Medium Priority
?
2,880 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 225 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

609 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