It seems this question has been asked a thousand times but I still haven't found a way to make this work
I have an image map. When I click on the defined areas in the image map I want another image to display in fancybox. Below is my HTML. Here is the resulting page. Only the first two coin images have been mapped and have images that load. I'm not a programmer...probably could consider myself knowledgeable enough to be dangerous. So if this is resolvable with java script, I'll need guidance on how to do this.
As you can see below in my image map html, I try to call the fancybox class for that image, but when you click on that specific area all you get is the image rendered as a single page at it's URL.
<img src="http://patriotnumismatics.com/wp-content/uploads/2016/10/Dansco7070Page1Front-688x1009.png" alt="" usemap="#Map" />
<area shape="poly" class="fancybox" coords="315,103,352,88,384,97,399,119,403,138,394,175,366,194,340,193,321,182,309,162,304,137,301,132" href="http://patriotnumismatics.com/wp-content/uploads/2016/10/D7070_P1_1834_CapBust_Half1c.jpg" />
<area alt="" title="" href="http://patriotnumismatics.com/wp-content/uploads/2016/10/D7070_P1_1834_Lrg1c.jpg" shape="poly" coords="383,336,444,315,491,359,471,423,418,437,380,406,368,372" />
</map>
