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.

[CODE=javascript]<SCRIPT>
function makevisible(cur ,which){
if (which==0)
cur.filters.alp ha.opacity=90
else
cur.filters.alp ha.opacity=40
if (which==2)
cur.filters.alp ha.opacity=0
}
</SCRIPT>
[/CODE]
[HTML]<button style="font-size: 9pt; color: gray; FILTER: alpha(opacity=4 0); background-color: gainsboro; border: 3px double gainsboro"
onmouseover="th is.style.color= 'black'; makevisible(thi s,0)" onmouseout="thi s.style.color=' gray'; makevisible(thi s,1)" onclick="listin fo()">List</button><br><br>[/HTML]

[Fisher ma]

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

[CODE=javascript]<SCRIPT>
function makevisible(cur ,which){
if (which==0)
cur.filters.alp ha.opacity=90
else
cur.filters.alp ha.opacity=40
if (which==2)
cur.filters.alp ha.opacity=0
}
function listinfo(el){
makevisible(el, 0);
el.onmouseout = function(){
};
}
</SCRIPT>
[/CODE]
[HTML]<button style="font-size: 9pt; color: gray; FILTER: alpha(opacity=4 0); background-color: gainsboro; border: 3px double gainsboro"
onmouseover="th is.style.color= 'black'; makevisible(thi s,0)" onmouseout="thi s.style.color=' gray'; makevisible(thi s,1)" onclick="listin fo(this)">List</button><br><br>[/HTML]

[acoder]

Please use code tags when posting code:

&#91;CODE=javas cript]
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.

[CODE=javascript]

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

[/CODE]

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

[CODE=javascript]<SCRIPT>
var last_clicked_el ement_id = null;

function makevisible(cur ,which){
if (which==0)
{
cur.style.color ='black';
cur.filters.alp ha.opacity=90;
}
else
{
if ((!cur.id) || (cur.id != last_clicked_el ement_id))
{
cur.style.color ='gray';
cur.filters.alp ha.opacity=40;
}
}
}

function listinfo(cur)
{
var old_selected = null;

if (last_clicked_e lement_id)
{
old_selected = document.getEle mentById(last_c licked_element_ id);
}
last_clicked_el ement_id = cur.id;
if (old_selected) makevisible(old _selected, 1)

makevisible(cur ,0);
}</SCRIPT>
[/CODE]
[HTML]<button style="font-size: 9pt; color: gray; FILTER: alpha(opacity=4 0); background-color: gainsboro; border: 3px double gainsboro"
onmouseover="ma kevisible(this, 0)"
onmouseout="mak evisible(this,1 )" onclick="listin fo(this)" id=button1>List 1</button>
<br>
<button style="font-size: 9pt; color: gray; FILTER: alpha(opacity=4 0); background-color: gainsboro; border: 3px double gainsboro"
onmouseover="ma kevisible(this, 0)"
onmouseout="mak evisible(this,1 )" onclick="listin fo(this)" id=button2>List 2</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.mozOpacit y to support older versions of Mozilla/Firefox.