TwentyFourteen – Image map not working

I’m trying to use an image map on the front page of a site I’m developing – https://kiidstrust.dyndns.org.

It simply doesn’t work, BUT the same code DOES work if I generate a plain HTML page and put the image map there – see
https://kiidstrust.dyndns.org/frontpage_test.htm

Clicking on the Donate> button at bottom right of the top large image on the frontpage_test.htm page links correctly to the Donate page.

But the same code in the WordPress front page doesn’t do anything – no link showing on hover, no ‘hand’ indicating a link, and clicking does nothing.

Here’s the code, generated in Dreamweaver CS3 for the test html page:

<img src="/images/kiidstrust_header.png" alt="kiidstrust_header image" width="1240" height="240" border="0" usemap="#donate" class="aligncenter size-full wp-image-198" />
<map name="donate" id="donate"><area shape="rect" coords="862,421,1216,501" href="/index.php/donate" alt="Click to go to Donate page" />
</map>

I’ve tried referring to the map by name instead of ID (leaving out the # in usemap=”#donate”) – no difference.

Any other suggestions to get this to work? Thanks if anyone can help.

John McC

PS. When I look at View Source for the WordPress page, the only thing I can see that looks odd is that an extra <p> tag has been put in front of the <img> tag, and an extra line break tag has appeared before the opening <map>tag. Don’t know where they came from – not in the original [Text] tab view on the Edit Page in WP.