I came up with a solution, but it's kind of awful (so would be very happy to see a better answer).
My workaround is to dynamically add a fallback <area>
that fills the entire image and let clicks outside the exiting area's fall back to it:
var msie = /MSIE/.test(navigator.userAgent);
if (msie)
{
// Don't do this hack twice
$('map[data-iehack!="1"]').each(function ()
{
// First find the image this map applies to
var $this = $(this);
var name = $this.attr('name');
var $img = $('img[usemap="#' + name + '"]');
// Then find if the image is in an <a> tag
var $link = $img.parents('a');
if ($link.length > 0)
{
// If there is an <a> add an extra <area> that fills the image
var wrapLink = $link[0].href;
var width = $img.width();
var height = $img.height();
var $fallbackArea = $('<area shape="rect" coords="0,0,' + width + ',' + height + '" />');
$fallbackArea.attr('href', wrapLink);
$this.append($fallbackArea);
}
// Flag this map so we don't add it again
$this.attr('data-iehack', '1');
});
}
This example is in jQuery but the principal should work in other frameworks.
There has to be a better way than this - and this hack has to check the browser as I can't figure out how to detect IE's failure here.