Using an image map and a link on the same image

Question

I have images with dynamically generated image maps. I want users to be able to click on the map and be taken through to the <area href= property.

However, when they click on the background (i.e. not in any of the map's areas) I want them to go through to a background URL.

So my code looks something like this (fiddle):

<a href="fromAnchor.html" target="_blank">
    <img src="image.png" usemap="#test" />
</a>

<map name="test" id="test">
    <area href="fromMap.html">
</map>

In Chrome/FX it works as I expect - if I click in the area tag's shape I get taken to fromMap.html, if I click elsewhere I get directed to fromAnchor.html.

However, in IE (tested up to IE10) clicking on the img but outside the area does nothing. It does show the URL hint in the bottom left corner, but it doesn't follow the a tag.

Is there a way around this?

Answer 1

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.