带有背景图像的按钮

  1. <html>
  2. <head>
  3. <style>
  4. input
  5. {
  6. background-image:url('/i/eg_bg_03.gif');
  7. width:156px;
  8. height:111px;
  9. }
  10. </style>
  11. <script type="text/javascript">
  12. function over()
  13. {
  14. if (event.srcElement.tagName=="INPUT")
  15.     {
  16.     event.srcElement.style.backgroundImage="url('/i/eg_bg_04.gif')"
  17.     }
  18. }
  19.  
  20. function out()
  21. {
  22. if (event.srcElement.tagName=="INPUT")
  23.     {
  24.     event.srcElement.style.backgroundImage="url('/i/eg_bg_07.gif')"
  25.     }
  26. }
  27. </script>
  28. </head>
  29.  
  30. <body>
  31. <p>请把鼠标移动到图像上：</p>
  32. <form onmouseout="out()" onmouseover="over()">
  33. <input class="a" type="button" value="按钮 1"><br />
  34. <input class="b" type="button" value="按钮 2"><br />
  35. <input class="c" type="button" value="按钮 3"><br />
  36. </form>
  37. </body>
  38.  
  39. </html>