I used Image Map Pro to map an image and add links. I used an HTML block (Gutenberg) to add the first snippet of code to my page. Furthermore, I used the WP Code plugin to add the second and third snippets to the body. Nothing. What am I doing wrong?
I've tried messaging Image Map Pro, posting on the WordPress forums, and asking on Facebook and Reddit, no help lol.
The code provided by Image Map Pro
Pasting the second and third code snippets into the body of my site, using WP Code plugin
Adding the first snippet of code into my website page where I want the image
The end result: absolutely nothing
The end result should be an image of a clothesline with three clickable links embedded. Instead, it shows absolutely nothing.
The code provided by Image Map Pro is:
<div id="image-map-pro"></div>
<script src="image-map-pro.min.js"></script>
<script>ImageMapPro.init('#image-map-pro', {"id":"cefca7b6-34bd-42ff-a9ff-acd4ecd75990","general":{"name":"Clothesline"},"artboards":[{"background_type":"image","image_url":"https://howthecrowflies.com/wp-content/uploads/2023/04/the-clothesline.png","children":[{"id":"5d6ed4f3-5656-4cfb-b76e-13dc9f0a15ed","title":"Poly","type":"poly","x":65.70121951219512,"y":16.20061610772358,"width":13.262195121951223,"height":16.966463414634145,"default_style":{"opacity":0},"mouseover_style":{"opacity":0.15540540540540543},"tooltip_style":{"background_color":"#82936a"},"tooltip_content":[{"type":"Heading","text":"REVIEWS","heading":"h3","other":{"id":"","classes":"","css":""},"style":{"fontFamily":"sans-serif","fontSize":20.8,"lineHeight":"normal","color":"#ffffff","textAlign":"center"},"boxModel":{"width":"auto","height":"auto","margin":{"top":0,"bottom":0,"left":0,"right":0},"padding":{"top":10,"bottom":10,"left":10,"right":10}},"id":"dff7359e-de06-465e-b81a-7b14fc81c823"}],"x_image_background":65.70121951219512,"y_image_background":16.20061610772358,"points":[{"x":0,"y":87.3015873015873},{"x":1.1494252873563218,"y":15.873015873015872},{"x":82.75862068965517,"y":0},{"x":90.80459770114942,"y":25.396825396825395},{"x":100,"y":73.01587301587301},{"x":20.689655172413794,"y":100}]},{"id":"110b3c2d-a352-4743-b69c-5cef7271659b","title":"Poly","type":"poly","x":34.29878048780488,"y":19.70163236788618,"width":27.59146341463414,"height":66.25,"default_style":{"opacity":0},"mouseover_style":{"opacity":0.15540540540540543},"tooltip_style":{"background_color":"#f89c6f"},"tooltip_content":[{"type":"Heading","text":"TRAVEL","heading":"h3","other":{"id":"","classes":"","css":""},"style":{"fontFamily":"sans-serif","fontSize":20.8,"lineHeight":"normal","color":"#ffffff","textAlign":"center"},"boxModel":{"width":"auto","height":"auto","margin":{"top":0,"bottom":0,"left":0,"right":0},"padding":{"top":10,"bottom":10,"left":10,"right":10}},"id":"e7742297-a907-4e7d-ad83-eeff5959124a"}],"x_image_background":34.29878048780488,"y_image_background":19.70163236788618,"points":[{"x":8.83977900552486,"y":53.65853658536586},{"x":3.867403314917127,"y":49.59349593495935},{"x":0,"y":43.90243902439025},{"x":0.5524861878453038,"y":38.61788617886179},{"x":1.1049723756906076,"y":30.48780487804878},{"x":3.314917127071823,"y":25.203252032520325},{"x":3.867403314917127,"y":19.10569105691057},{"x":5.524861878453039,"y":13.008130081300814},{"x":7.18232044198895,"y":7.317073170731707},{"x":9.94475138121547,"y":2.4390243902439024},{"x":16.574585635359114,"y":1.2195121951219512},{"x":24.30939226519337,"y":1.2195121951219512},{"x":32.59668508287293,"y":2.0325203252032518},{"x":36.46408839779006,"y":2.4390243902439024},{"x":45.30386740331492,"y":2.4390243902439024},{"x":51.38121546961326,"y":2.0325203252032518},{"x":57.4585635359116,"y":2.0325203252032518},{"x":64.64088397790056,"y":1.2195121951219512},{"x":72.92817679558011,"y":1.2195121951219512},{"x":79.55801104972376,"y":0},{"x":87.29281767955801,"y":0.8130081300813009},{"x":93.92265193370166,"y":1.2195121951219512},{"x":94.47513812154696,"y":6.910569105691057},{"x":95.02762430939227,"y":12.195121951219512},{"x":98.34254143646409,"y":16.666666666666664},{"x":97.79005524861878,"y":21.544715447154474},{"x":97.23756906077348,"y":25.609756097560975},{"x":98.34254143646409,"y":30.48780487804878},{"x":97.79005524861878,"y":35.77235772357724},{"x":98.89502762430939,"y":39.83739837398374},{"x":100,"y":45.52845528455284},{"x":99.4475138121547,"y":50.40650406504065},{"x":98.34254143646409,"y":54.87804878048781},{"x":95.02762430939227,"y":58.13008130081301},{"x":91.71270718232044,"y":61.78861788617886},{"x":88.39779005524862,"y":65.04065040650406},{"x":84.5303867403315,"y":67.47967479674797},{"x":82.87292817679558,"y":70.32520325203252},{"x":83.42541436464089,"y":76.82926829268293},{"x":83.42541436464089,"y":81.70731707317073},{"x":80.11049723756905,"y":88.21138211382113},{"x":72.92817679558011,"y":94.3089430894309},{"x":65.74585635359117,"y":97.96747967479675},{"x":56.9060773480663,"y":100},{"x":49.72375690607735,"y":98.78048780487805},{"x":43.0939226519337,"y":96.34146341463415},{"x":39.226519337016576,"y":91.869918699187},{"x":39.226519337016576,"y":87.39837398373984},{"x":39.77900552486188,"y":83.33333333333334},{"x":39.77900552486188,"y":78.86178861788618},{"x":40.88397790055249,"y":75.20325203252033},{"x":40.88397790055249,"y":69.91869918699187},{"x":41.988950276243095,"y":66.66666666666666},{"x":40.331491712707184,"y":63.82113821138211},{"x":39.77900552486188,"y":59.34959349593496},{"x":40.88397790055249,"y":56.50406504065041},{"x":39.226519337016576,"y":53.2520325203252},{"x":38.12154696132597,"y":47.96747967479675},{"x":36.46408839779006,"y":44.71544715447154},{"x":30.386740331491712,"y":44.71544715447154},{"x":24.861878453038674,"y":45.1219512195122},{"x":16.022099447513813,"y":47.15447154471545},{"x":10.497237569060774,"y":48.3739837398374}]},{"id":"e70c765c-d5f9-4a7e-975c-d3cec636cf53","title":"Poly","type":"poly","x":5.0304878048780495,"y":14.854071392276422,"width":16.768292682926827,"height":42.82012195121951,"default_style":{"opacity":0},"mouseover_style":{"opacity":0.15540540540540543},"tooltip_style":{"background_color":"#618483"},"tooltip_content":[{"type":"Heading","text":"BLOG","heading":"h3","other":{"id":"","classes":"","css":""},"style":{"fontFamily":"sans-serif","fontSize":20.8,"lineHeight":"normal","color":"#ffffff","textAlign":"center"},"boxModel":{"width":"auto","height":"auto","margin":{"top":0,"bottom":0,"left":0,"right":0},"padding":{"top":10,"bottom":10,"left":10,"right":10}},"id":"574d3efd-0e22-46d7-b12d-adffa374953f"}],"x_image_background":5.0304878048780495,"y_image_background":14.854071392276422,"points":[{"x":7.2727272727272725,"y":89.937106918239},{"x":0,"y":83.01886792452831},{"x":0.9090909090909091,"y":71.0691823899371},{"x":2.727272727272727,"y":61.0062893081761},{"x":5.454545454545454,"y":49.685534591194966},{"x":11.818181818181818,"y":47.16981132075472},{"x":15.454545454545453,"y":35.84905660377358},{"x":20,"y":25.78616352201258},{"x":25.454545454545453,"y":12.578616352201259},{"x":29.09090909090909,"y":3.7735849056603774},{"x":37.27272727272727,"y":0},{"x":48.18181818181818,"y":2.515723270440252},{"x":51.81818181818182,"y":8.80503144654088},{"x":51.81818181818182,"y":16.352201257861633},{"x":69.0909090909091,"y":19.49685534591195},{"x":73.63636363636363,"y":13.836477987421384},{"x":76.36363636363637,"y":5.660377358490567},{"x":89.0909090909091,"y":6.918238993710692},{"x":90.9090909090909,"y":15.09433962264151},{"x":89.0909090909091,"y":23.270440251572328},{"x":88.18181818181819,"y":33.33333333333333},{"x":91.81818181818183,"y":40.25157232704403},{"x":94.54545454545455,"y":49.685534591194966},{"x":97.27272727272728,"y":59.11949685534591},{"x":100,"y":69.81132075471697},{"x":94.54545454545455,"y":80.50314465408806},{"x":89.0909090909091,"y":90.56603773584906},{"x":80.9090909090909,"y":98.11320754716981},{"x":73.63636363636363,"y":99.37106918238993},{"x":61.81818181818181,"y":100},{"x":36.36363636363637,"y":99.37106918238993},{"x":17.272727272727273,"y":95.59748427672956},{"x":15.454545454545453,"y":89.937106918239}]}]}],"version":"6.0.5"})</script>
In your first image, it says that
needs to be put just before the closing body tags, and then you are supposed to put the script code after it. However, your code snippets plugin says that the scripts will be printed right below the opening body tags. While I do know a little web development, it's not my first language, so that may have no effect on the situation.
My other possible solution would be to add the script directly into the HTML block. I'm not sure whether the div would need to go first or the script, but I do know that scripts can go in code blocks.