Introduction

In this article, you will learn about mouse events. There are seven types of mouse event; they are:
  1. Onclick
  2. 2.Ondblclick
  3. Onmousedoen
  4. Onmousemove
  5. Onmouseover
  6. Onmouseout
  7. Onmouseup
I have divided the mouse events into three parts.
Second Part
Today you will learn OnMouseover and OnMouseout,
OnMouseOver
The mouseover event occurs when the user moves the mouse pointer into the object.
OnMouseout
The onmouseout event occurs when the user moves the mouse pointer out of the object.
Example
In the following example, I have defined two divs, maim and main2. In the main div, the text will be changed and in the main2 the image will be changed for the OnMouseover and OnMouseOut.
  1. <html>
  2. <head>
  3. <style>
  4. body
  5. {
  6. font-family: Arial, Helvetica, sans-serif;
  7. font-size: 18px;
  8. font-weight: bold;
  9. background: #006699;
  10. text-align: center;
  11. color: #FFFFFF;
  12. }
  13. #main
  14. {
  15. background: red;
  16. height: 100px;
  17. width: 200px;
  18. padding: 55px;
  19. }
  20. #main2
  21. {
  22. background: red;
  23. height: 300px;
  24. width: 300px;
  25. }
  26. </style>
  27. <script type="text/javascript">
  28. function hover(asd) {
  29. asd.innerHTML = "fnish Mouseoveer"
  30. }
  31. function out(asd) {
  32. asd.innerHTML = "Mouseout"
  33. }
  34. function ima(x) {
  35. document.getElementById("img1").style.display = "block";
  36. document.getElementById("img2").style.display = "none";
  37. }
  38. function image(x) {
  39. document.getElementById("img2").style.display = "block";
  40. document.getElementById("img1").style.display = "none";
  42. }
  43. </script>
  44. </head>
  45. <body>
  46. <div onmouseover="hover(this)" onmouseout="out(this)" onmouseover="out(this)" onmouseout="hover(this)"
  47. id="main">
  48. Mouseover Me</div>
  49. Next
  50. <div onmouseover="ima(this)" onmouseout="image(this)" id="main2">
  51. Mouseover Me
  52. <img src="download (1).jpg" id="img1" style="display: none" />
  53. <img src="download.jpg" id="img2" style="display: none" />
  54. </div>
  55. </body>
  56. </html>
Output
gandhi3.jpg
gandhi4.jpg
gandhi1.jpg
OnMouseout shows this image:
gandhi2.jpg
OnMouseover shows this image: