Advanced Search

Click the color name to change the text color

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <html>
  2. <head>
  3. <title>Click the color name to change the text color: </title>
  4.  
  5. <style type="text/css">
  6.   .red {color:red}
  7.  .green {color:green}
  8.  .blue {color:blue}
  9. </style>
  10.  
  11. </head>
  12.  
  13. <body>
  14.  
  15. <center>
  16. <h4>Click the color name to change the text color: </h4>
  17. <table width="70%" border="1" cellspacing="3" cellpadding="3">
  18. <tr> 
  19. <td width="25%"><a href="#; return false;" onClick="document.all.one.className='red'" 
  20.                  onMouseOver="this.style.background='red';this.style.color='white';" 
  21.                  onMouseOut="this.style.background='';this.style.color='';">Red</a>
  22. </td>
  23.  
  24. <td rowspan="3"><span id="one">Click the color name to change the text color. 
  25.                                This is changing className by javascript.</span> 
  26. </td>
  27. </tr>
  28.  
  29. <tr> 
  30. <td><a href="#; return false;" onClick="document.all.one.className='green'" 
  31.      onMouseOver="this.style.background='green';this.style.color='white';" 
  32.      onMouseOut="this.style.background='';this.style.color='';">Green</a>
  33. </td>
  34. </tr>
  35. <tr> 
  36. <td><a href="#; return false;" onClick="document.all.one.className='blue'" 
  37.      onMouseOver="this.style.background='blue';this.style.color='white';" 
  38.      onMouseOut="this.style.background='';this.style.color='';">Blue</a>
  39. </td>
  40. </tr>
  41. </table>
  42. <br>
  43.  
  44. </center>
  45. </body>
  46. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.