By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,042 Members | 1,007 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,042 IT Pros & Developers. It's quick & easy.

Button change colour by mouse action. Please help

100+
P: 123
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.

Expand|Select|Wrap|Line Numbers
  1. <SCRIPT>
  2. function makevisible(cur,which){
  3. if (which==0)
  4. cur.filters.alpha.opacity=90
  5. else
  6. cur.filters.alpha.opacity=40
  7. if (which==2)
  8. cur.filters.alpha.opacity=0
  9. }
  10. </SCRIPT>
  11.  
[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]
Nov 9 '07 #1
Share this Question
Share on Google+
5 Replies


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

Expand|Select|Wrap|Line Numbers
  1. <SCRIPT>
  2. function makevisible(cur,which){
  3. if (which==0)
  4. cur.filters.alpha.opacity=90
  5. else
  6. cur.filters.alpha.opacity=40
  7. if (which==2)
  8. cur.filters.alpha.opacity=0
  9. }
  10. function listinfo(el){
  11.     makevisible(el,0);
  12.     el.onmouseout = function(){
  13.     };
  14. }
  15. </SCRIPT>
  16.  
[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]
Nov 9 '07 #2

acoder
Expert Mod 15k+
P: 16,027
Please use code tags when posting code:

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

Thanks!
Nov 9 '07 #3

100+
P: 123
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.

Expand|Select|Wrap|Line Numbers
  1.  
  2. <button style="font-size: 9pt; color: gray; FILTER: alpha(opacity=40); background-color: gainsboro; border: 3px double gainsboro" 
  3. 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>
  4. <button style="font-size: 9pt; color: gray; FILTER: alpha(opacity=40); background-color: gainsboro; border: 3px double gainsboro" 
  5. 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>
  6.  
  7.  
Nov 12 '07 #4

Dasty
Expert 100+
P: 101
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:

Expand|Select|Wrap|Line Numbers
  1. <SCRIPT>
  2. var last_clicked_element_id = null;
  3.  
  4. function makevisible(cur,which){
  5.   if (which==0)
  6.   {
  7.     cur.style.color='black';
  8.     cur.filters.alpha.opacity=90;
  9.   }
  10.   else
  11.   {
  12.     if ((!cur.id) || (cur.id != last_clicked_element_id))
  13.     {
  14.       cur.style.color='gray';
  15.       cur.filters.alpha.opacity=40;
  16.     }
  17.   }
  18. }
  19.  
  20. function listinfo(cur)
  21. {
  22.   var old_selected = null;
  23.  
  24.   if (last_clicked_element_id)
  25.   {
  26.     old_selected = document.getElementById(last_clicked_element_id);
  27.   }
  28.   last_clicked_element_id = cur.id;
  29.   if (old_selected) makevisible(old_selected, 1)
  30.  
  31.   makevisible(cur,0);
  32. }</SCRIPT>
  33.  
[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.
Nov 12 '07 #5

acoder
Expert Mod 15k+
P: 16,027
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.
Nov 12 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.