Image mapped image not fully clickable in IE

问题

I have the following code (well, with links altered for anonymity) in my page...

<a href="http://www.page1.com" ><img usemap="#termsclickable" src="picture.png"  /></a>

<map id="termsclickable" name="termsclickable">
<area shape="rect" coords="750,376,938,409" target="_blank" href="http://www.page2.com" alt="" title=""    />

</map>

In Chrome and Firefox I can click anywhere outside the rectangle co-ordinates and be taken to page1, and click within the co-ords and get page 2, but in Internet Explorer nothing happens when I click outside the co-ords.

What's odd is that if I right click and click 'Open link' it works.

Has anyone seen this odd behaviour before and knows of a workaround? Or perhaps something wrong with my syntax?

回答1:

I am going to answer my own question so that others can come here to get an answer.

As suggested by @Pete I need to define another area that encompases the whole image, and then list it last in my image map....

<a href="http://www.page1.com" ><img usemap="#termsclickable" src="picture.png"  /></a>

<map id="termsclickable" name="termsclickable">
<area shape="rect" coords="750,376,938,409" target="_blank" href="http://www.page2.com" alt="" title=""    />
<area shape="rect" coords="0,0,650,950" href="http://www.page1.com" />

</map>

回答2:

Perhaps use the 'default' shape. You can find relevant examples here.

EDIT: Just copying a relevant example from the linked page:

<area   shape="default"
    nohref="nohref" title="Default" alt="Default"/>

来源：https://stackoverflow.com/questions/17673467/image-mapped-image-not-fully-clickable-in-ie