Image map links not loading modal

Question

I have an image map that has various links to modals, href="#mymodal" but these aren't appearing when I click on them the address gets updated with the proper id but the modal won't appear...

a href="#tiltyard" link
  img.pure-img usemap="#hcmap" src="images/FoodDrinkBG_light.jpg"
  map#hcmap name="hcmap"
    area alt="" coords="9,167,194,404" href="#tiltyard" shape="rect" target="_self" title="" /
    area alt="" coords="325,181,476,403" href="#wilderness" shape="rect" target="" title="" /
    area alt="" coords="343,432,621,586" href="#privy" shape="rect" target="" title="" /
    area alt="" coords="271,611,417,841" href="#fountain" shape="rect" target="" title="" /
    area alt="" coords="479,618,618,819" href="#icecream" shape="rect" target="" title="" /

clicking 'link' opens the modal, clicking on the image map does not

I'm using ratchet for the modal

Answer 1

From the Ratchet documentation:

Modals are designed to only fire from links.

You can see from this line in the Ratchet modal code, it is only selecting a tags to attach listeners to, so it will not detect clicks on your area tags.

I see two possible options:

1. Raise an issue on the Ratchet GitHub repo, and I'm sure the developers will be able to suggest a solution (or provide a fix).
2. Create a hacky workaround involving hidden a tags, using JS to proxy the clicks from your area tags.