Problems with show() in IE with image map using hilight plugin

Problems with show() in IE with image map using hilight plugin

I have an input which has an onclick event that will display (show()) the maphilight content within a div (initial css display:none) when in focus.  My problem is strange and only seems to effect IE.  That is the image map within the div does not display when the div is revealed by the onclick event.  The div does display however the map is not displaying.  If I remove the css display:none attribute it dipslays fine (but not as i need it obviously), so it appears to be a issue with IE not processing the image map as it has the initial state display:none.  No js errors present.  I have tried several different work arounds for this with little joy.   Does anyone know what may be happening here?

Full example below.   Any help appreciated. Thanks.

  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title>temp map</title>
  6. <style type="text/css">
  7. #searchit {
  8. display:none;
  9. margin-right:30px;
  10. padding-top:0;
  11. margin-top:0;
  12. width:895px;
  13. height:510px;
  14. margin-left:235px;
  15. border:1px #000 solid;
  16. }
  17. </style>
  18. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
  19. <script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script> 
  20. <script type="text/javascript">
  21. $(function() {
  22. $('.map').maphilight();
  23. });
  24. $.fn.maphilight.defaults = {
  25. fill: true,
  26. fillColor: '333333',
  27. fillOpacity: 1,
  28. stroke: true,
  29. strokeColor: 'CCCCCC',
  30. strokeOpacity: 1,
  31. strokeWidth: 2,
  32. fade: true,
  33. alwaysOn: false,
  34. neverOn: false,
  35. groupBy: false
  36. }
  37. </script>
  38. <script type="text/javascript">
  39. $(document).ready(function() {
  40. $('#displaysearch').focus(function(s) {
  41. s.preventDefault();
  42. $('#searchit').slideDown('slow');
  43. $('#hidesearch').show(); 
  44. });
  45. $('#hidesearch').click(function(s) {
  46. s.preventDefault();
  47. $('#searchit').slideUp('slow');
  48. $('#hidesearch').hide();
  49. });
  50. $(".click").hover(function(){
  51. pos = $(this).attr("id");
  52. $('#Location').val(pos);
  53. });
  54. });
  55. </script>
  56. </head>
  57. <body>
  58. <div id="header">
  59.   <div id="search_opener">
  60.   <span id="searchstart">Search</span><br/>
  61.   <input id="displaysearch" name="displaysearch" type="text"  /><br/>
  62.   <a href="#" id="hidesearch">CLOSE SEARCH WINDOW</a>
  63.   <!-- end #search_opener --></div>
  64. <!-- end header --></div>

  66. <div id="searchit">
  67. <map name="mymap"> 
  68. <area shape="circle" coords="70,84,51" href="http://www.december.com" class="click"> 
  69. <area shape="rect" coords="25,180,125,280" href="http://www.december.com/html/" class="click"> 
  70. <area shape="poly" coords="153,106,186,225,340,193,315,81,304,167" href="http://www.december.com/works/tour.html" class="click"> 
  71. <area shape="rect" coords="420,19,478,278" Nohref class="click">
  72. <area shape="circle" coords="499,299,100" href="http://www.cnn.com/" class="click">
  73. <area shape="default" coords="0,0,500,300" href="http://www.december.com/john/" class="click"> 
  74. </map>

  76. <img src="http://www.december.com/html/images/imagemap.gif" width="500" height="300" alt="Image Map" usemap="#mymap" class="map" ismap>
  77.   <!-- end #searchit --></div>
  78. </body>
  79. </html>