fade In a div when hover on an imagemap

fade In a div when hover on an imagemap

hello, I have an imagemap, I want to when mouse over on a hot spot a div with some information about that place fade in and with mouse leave it fade out. my html page is below:
  1.  <div id="content">
  2.        <img src="382525_CMQTqaMx.gif" alt="" />
  3.        <map id="map">
  4.        <area shape="circle" coords="100,200,20" alt="" class="hotspot"  />
  5.        <div class="projects">
  6.         <a>project 1</a>
  7.         <a>project 2</a>
  8.        </div>
  9.        <area shape="circle" coords="200,300,20" alt="" class="hotspot" />
  10.        <div class="projects">
  11.         <a>project 3</a>
  12.         <a>project 4</a>
  13.         <a>project 5</a>
  14.        </div>
  15.        <area shape="circle" coords="400,200,20" alt="" class="hotspot" />
  16.        <div class="projects">
  17.         <a>project 6</a>
  18.         <a>project 7</a>
  19.         <a>project 8</a>
  20.        </div>
  21.        <area shape="circle" coords="300,400,20" alt="" class="hotspot" />
  22.        <div class="projects">
  23.         <a>project 9</a>
  24.         <a>project 10</a>
  25.      
  26.        </div>
  27.        </map>
  28.       
  29.     </div>
and the css and jquery is below,
  1.  <style type="text/css">
  2.     .projects
  3.     {
  4.         display:none;
  5.        
  6.         }
  7.         .hotspot
  8.         {background-color:Red;}
  9.     </style>
  10.     <script type="text/javascript">
  11.         $(function () {
  12.             $('.hotspot').each(function () {
  13.                 $(this).hover(
  14.             function () {
  15.                 $('.projects').fadeIn(slow);
  16.             },
  17.             function () {
  18.                 $('.projects').fadeOut(slow);
  19.             })
  20.             });
  21.         });
  22.     </script>
it will help me alot if any body help about this.