Multiple mouseover

Multiple mouseover

Hi

I would like to know how I can have multiple functions on the same page.
The idea as you will see is to have a pic on top of text and on mouseenter the pic is faded to show the text.
I would like to have 4 pics with the same effect on the same page.

Here is my code, it works great for one picture but not when I add the other 3:

Thank you in advance for your help
  1. <script type="text/javascript">

  2. $(function() {$('#one img').mouseenter(function() { $(this).fadeOut(200);

  3. });
  4. $('#one').mouseleave(function() { $('#one img').fadeIn(200); })
  5. ;});

  7. $(function() {$('#two img').mouseenter(function() { $(this).fadeOut(200);
  8. });
  9. $('#two').mouseleave(function() { $('#two img').fadeIn(200); });
  10. });

  12. $(function() {$('#three img').mouseenter(function() { $(this).fadeOut(200); });
  13. $('#three').mouseleave(function() { $('#three img').fadeIn(200); })
  14. ;});

  16. $(function() {$('#four img').mouseenter(function() { $(this).fadeOut(200);
  17. });
  18. $('#four').mouseleave(function() { $('#four img').fadeIn(200); });
  19. });

  21. </script>

  23. <div id="one">fgjk jdjgkld fj dsfk klsd klgdjsk gljsdlk gkljsdkl fkjksd klg ksdkj gsdlk klsdjgjklsdjgkl dklf<img src="img/eye.png"></div>

  25. <div id="two">fgjk jdjgkld fj dsfk klsd klgdjsk gljsdlk gkljsdkl fkjksd klg ksdkj gsdlk klsdjgjklsdjgkl dklf<img src="img/water.png"></div>

  27. <div id="three">fgjk jdjgkld fj dsfk klsd klgdjsk gljsdlk gkljsdkl fkjksd klg ksdkj gsdlk klsdjgjklsdjgkl dklf<img src="img/eye.png"></div>

  29. <div id="four">fgjk jdjgkld fj dsfk klsd klgdjsk gljsdlk gkljsdkl fkjksd klg ksdkj gsdlk klsdjgjklsdjgkl dklf<img src="img/water.png"></div>