Remove hotspot outline with jquery?

Remove hotspot outline with jquery?

I have an outline that appears around my poly hotspot, but outline:none isn't removing the outline.

Because this runs on an intranet, we don't have to worry about accessibility.

Here's a simplified version of the page code.  As you can see, I even tried to fade out the image with the hotspot before loading the hidden div on top.  It just fades out the image but keeps the hotspot outline.  It made me laugh the first time I saw that happen.
 
  1. <html><head><title>ribbon</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  2. <style>
    .redline-css {margin-top:-90;display:none;background-color:#bca;width:0px;border:1px;}
    .body-div-css {display:none;height:0px;width:1000px;border:0px;}</style> 
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body > 
    <div id="cycle-div"><img id="cycle" src="assets/header-grey-box.png" border="0" usemap="#Map" style="outline:none;"><map style="outline:none;" name="Map">  <area style="outline:none;" id="hotspot" shape="poly" coords="67,12,60,64,182,65,164,12,109,13" href="#" alt="why-goal">
    </map>
    </div>







  3. <div class="redline-css" id="block"><img src="assets/top-red-bar.png"></div>
    <div class="body-div-css" id="body-div"> <img src="assets/Detailed-Goal-Planning.png"> </div>
  4. <script>
    $("#hotspot").click(function()
          {$("#cycle-div").animate({opacity:0},function()
             {  $("#block").css({display:"inline"})
                  .animate({width: "1000",opacity: 1,borderWidth: "0px"}, 1000, function()
                 {$("#body-div").slideDown(1000);}
                  );
             }
          );}
         )
     </script></body></html>