Click the color name to change the text color


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



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.