Map in CMS Block added to Categories Not working

Question

Summary: I have a graphic map on the top of my Categories to show the relative location of some reefs. I am trying to allow the user to select a reef (product) by clicking on the red X on the map. I wrote some test code for two spots, placed it in a Block and referenced and enabled the block in one of the Categories (Manatee). When I save and open my website, it displays the map OK but the mouse selection and callouts do not work. Presently coded at https://reefsnwrecks.com/manatee.html

I have created the HTML code as follows: (Location of .png file shown is for stand alone testing. See Block for actual location) I used https://www.image-map.net/ to create code for image.

Code:

When I insert the code into a Block it changes the order of some of the code. Not sure if the reorder is causing problem but I cannot stop Magento from reordering:

The mouse flyover callouts seem to work while in the Block page. (See yellow highlighting)

I then simply select that block in the Catagory and Save:

When I go to the website it properly displays the map and products but the flyover callouts and href links do not work.

What I have tried:

1. I am using revision 2.3.4
2. I have cleared the cache.
3. I have tried the code by itself and it works fine.
4. I have tried accessing the website using multiple web browsers, Edge, IE and Chrome.
5. I have tried with and without built in Category image and description.
6. I have tried another .png map file and it displays in site so I do not think the old .png is cached.

Any suggestions?