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

Highlighting a Linkbutton in javascript onclick

P: 42
hi all, i have 4 link buttons.all of them opens a popup window. i want when i click on button it gets highlited.
pls help. its urgent.

Neel.
Mar 25 '09 #1
Share this Question
Share on Google+
6 Replies


RamananKalirajan
100+
P: 607
onclick of that button just change the class of that button.. so that it looks like highlighted...

ex:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE> New Document </TITLE>
  5. <META NAME="Generator" CONTENT="EditPlus">
  6. <META NAME="Author" CONTENT="">
  7. <META NAME="Keywords" CONTENT="">
  8. <META NAME="Description" CONTENT="">
  9. <style type="text/css">
  10. .normal{
  11.     background-color: #999999;
  12. }
  13. .highlight{
  14.     background-color: #FF3333;
  15. }
  16. </style>
  17. <script type="text/javascript">
  18.     function highlightThis(ths)
  19.     {
  20.        for(var i=1;i<=4;i++)
  21.        {
  22.          var tempId = "select"+i;
  23.          if(ths.id==tempId)
  24.          {
  25.              document.getElementById(tempId).className = "highlight";
  26.          }
  27.          else
  28.          {
  29.             document.getElementById(tempId).className = "normal";
  30.          }
  31.         }
  32.     }
  33. </script>
  34. </HEAD>
  35. <BODY>
  36. <table width="100%" cellspacing="0" cellpadding="3px">
  37.     <tr>
  38.         <td>
  39.                 <input type="button" value="Select1" id="select1" name="select1" class="normal" onclick="highlightThis(this)">
  40.         </td>
  41.         <td>
  42.                 <input type="button" value="Select2" id="select2" name="select2" class="normal" onclick="highlightThis(this)">
  43.         </td>
  44.         <td>
  45.                 <input type="button" value="Select3" id="select3" name="select3" class="normal" onclick="highlightThis(this)">
  46.         </td>
  47.         <td>
  48.                 <input type="button" value="Select4" id="select4" name="select4" class="normal" onclick="highlightThis(this)">
  49.         </td>
  50.     </tr>
  51. </table>
  52. </BODY>
  53. </HTML>
This is just an example.. you can do it n no.. of ways...

Regards
Ramanan Kalirajan
Mar 25 '09 #2

P: 42
thanx a lot Ramanan it works.
Mar 26 '09 #3

RamananKalirajan
100+
P: 607
What i have given is just an example and it is the basic way of doing highlighting.. u can try your own and make it better...


Regards
Ramanan Kalirajan
Mar 26 '09 #4

Dormilich
Expert Mod 5K+
P: 8,639
@RamananKalirajan
e.g. using "this" inside the function:
Expand|Select|Wrap|Line Numbers
  1.     function highlightThis()
  2.     {
  3.        for(var i=1;i<=4;i++)
  4.        {
  5. // reset all class names to "normal"
  6.          document.getElementById("select"+i).className = "normal";
  7.        }
  8. // set current class name to "highlight"
  9.        this.className = "highlight";
  10.     }
Mar 26 '09 #5

RamananKalirajan
100+
P: 607
Thanks Dormilich, 'this' keyword.. using it it simplifies more than what i had did so far.. I will follow this way of doing things...

Regards
Ramanan Kalirajan
Mar 27 '09 #6

Dormilich
Expert Mod 5K+
P: 8,639
it took me quite a while to understand how OOP works in Javascript.
Mar 27 '09 #7

Post your reply

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