Linking Facebox to an Image Map Area.

[Zachary Freedom]

I am working on an ad which involves several clickable areas of an image, which, when clicked, should open up a Facebox with a more detailed image.

However, when I input "rel="facebook" into an Image map area without an anchor tag, Facebox doesn't come up, it just links straight to the image.

I was able to work around this by adding "a" at the beginning effectively convert the area into an anchor, which works in Firefox -

But the facebox doesn't work in IE or in Edge, in fact the entire link disappears.  Is there a solution to this?


My Code:

<img src="http://www.idealvac.com/files/images/Leybold_EcoDry_Plus56.jpg" alt="" usemap="#Map" />

    <map name="Map" id="Map">

        <a area alt="" title="" shape="rect" coords="724,1267,854,1337" href="http://www.idealvac.com/files/images/DimensionsEco40_65.gif" rel="facebox"/>

        <a area alt="" title="" shape="rect" coords="650,1267,854,1337" href="http://www.idealvac.com/files/images/DimensionsEco40_65.gif" rel="facebox"/>

   [...]

</map></a>

Thanks for your help and time,

Zach

[Zachary Freedom]

<img src="http://www.idealvac.com/files/images/Leybold_EcoDry_Plus56.jpg" alt="" usemap="#Map" />

    <map name="Map" id="Map">

        <a area alt="" title="" shape="rect" coords="724,1267,854,1337" href="http://www.idealvac.com/files/images/DimensionsEco40_65.gif" rel="facebox"/></a>

        <a area alt="" title="" shape="rect" coords="650,1267,854,1337" href="http://www.idealvac.com/files/images/DimensionsEco40_65.gif" rel="facebox"/></a>

   [...]

</map>

** Sorry I put the anchor end tags in the correct place and this still didn't fix the problem in IE or Edge