Hide image map coordinates when javascript is disabled

Question

I have an image map and I want to hide its clickable coordinates when Javascript is disabled, so that only the image is left. I tried using noscript in the html body:

<noscript>
  <style type='text/css'>
    area {display:none}
  </style>
</noscript>

but the area coordinates still show underneath the image. How can I completely hide them (preferably using pure css or pure javascript)?

Answer 1

Instead of having an image map be disabled if JavaScript isn't available, why not enable it only if JavaScript is available? Since you only want the map to appear is JS is enabled, JS can be used to enable it. Browsers with JS disabled will be unable to run the code and will only display the image.

var myMappedImages = document.getElementsByClassName("myMappedImage");
for(var i=0,len=myMappedImages.length;i<len;i++){
    myMappedImages[i].usemap = "#myimagemap";
}