Button change colour by mouse action. Please help

[perhapscwk]

I have something like below, normally when my mouse is over the button, it will change from less visible to visible, if mouse move away, it turn back to less visible.

But now i want to make it when i click the button, it will keep the status as visable even i move the mouse out from the button. Please help.

Thanks.

<SCRIPT>
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=90
else
cur.filters.alpha.opacity=40
if (which==2)
cur.filters.alpha.opacity=0
}
</SCRIPT>
 

[HTML]<button style="font-size: 9pt; color: gray; FILTER: alpha(opacity=40); background-color: gainsboro; border: 3px double gainsboro"
onmouseover="this.style.color='black'; makevisible(this,0)" onmouseout="this.style.color='gray'; makevisible(this,1)" onclick="listinfo()">List</button><br><br>[/HTML]

[Fisher ma]

Hi,there is some code will help you on the below.

<SCRIPT>
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=90
else
cur.filters.alpha.opacity=40
if (which==2)
cur.filters.alpha.opacity=0
}
function listinfo(el){
    makevisible(el,0);
    el.onmouseout = function(){
    };
}
</SCRIPT>
 

[HTML]<button style="font-size: 9pt; color: gray; FILTER: alpha(opacity=40); background-color: gainsboro; border: 3px double gainsboro"
onmouseover="this.style.color='black'; makevisible(this,0)" onmouseout="this.style.color='gray'; makevisible(this,1)" onclick="listinfo(this)">List</button><br><br>[/HTML]

[acoder]

Please use code tags when posting code:

[CODE=javascript]
Your JavaScript code...
[/code]

Thanks!

[perhapscwk]

Thanks, it works, however, there is 2 button, i want to make it when i Click the 2nd button, then the first button will chnage to less invisible again?

Thanks.

 
<button style="font-size: 9pt; color: gray; FILTER: alpha(opacity=40); background-color: gainsboro; border: 3px double gainsboro" 
onmouseover="this.style.color='black'; makevisible(this,0)" onmouseout="this.style.color='gray'; makevisible(this,1)" onclick="generatenote(); listinfo(this)">Generate PCRM note</button><br><br>
<button style="font-size: 9pt; color: gray; FILTER: alpha(opacity=40); background-color: gainsboro; border: 3px double gainsboro" 
onmouseover="this.style.color='black'; makevisible(this,0)" onmouseout="this.style.color='gray'; makevisible(this,1)" onclick="generatemail(); listinfo(this)">Generate Email: Disti</button><br>
 
 

[Dasty]

Your new condition changes solution quite a bit. So, you need to know which one button is in "clicked" state on general scope and old clicked button must be accessable (so we can turn it off). I think that easiest way would be to create global variable that holds object.id of last clicked button. (but it requires to set unique ids to all of your buttons). Solution would look like:

<SCRIPT>
var last_clicked_element_id = null;
 
function makevisible(cur,which){
  if (which==0)
  {
    cur.style.color='black';
    cur.filters.alpha.opacity=90;
  }
  else
  {
    if ((!cur.id) || (cur.id != last_clicked_element_id))
    {
      cur.style.color='gray';
      cur.filters.alpha.opacity=40;
    }
  }
}
 
function listinfo(cur)
{
  var old_selected = null;
 
  if (last_clicked_element_id)
  {
    old_selected = document.getElementById(last_clicked_element_id);
  }
  last_clicked_element_id = cur.id;
  if (old_selected) makevisible(old_selected, 1)
 
  makevisible(cur,0);
}</SCRIPT>
 

[HTML]<button style="font-size: 9pt; color: gray; FILTER: alpha(opacity=40); background-color: gainsboro; border: 3px double gainsboro"
onmouseover="makevisible(this,0)"
onmouseout="makevisible(this,1)" onclick="listinfo(this)" id=button1>List1</button>
<br>
<button style="font-size: 9pt; color: gray; FILTER: alpha(opacity=40); background-color: gainsboro; border: 3px double gainsboro"
onmouseover="makevisible(this,0)"
onmouseout="makevisible(this,1)" onclick="listinfo(this)" id=button2>List2</button>[/HTML]

Yes, maybe we can do it better / faster by remembering reference to last clicked object (instead of its id), but this one is easier to understand and you can tune it up yourself.

[acoder]

Just a quick mention on cross-browser compatibility.

Use style.opacity (standard) to support the other browsers (e.g. Firefox, Opera, Safari) and style.mozOpacity to support older versions of Mozilla/Firefox.