JohnWorsham

I used www.image-map.net to generate the map code. This took a lot of figuring out to get this to work in Squarespace but I finally discovered how to do it. You must put the code in an Embed block (not a Code block). Click Edit Embed block then click the </> option to the right so you can paste your code into it. My code looks like this:

<div>
    <img class="marginauto" src="https://static1.squarespace.com/static/5d0bcba6c62d2d000161a2dd/t/5e6f936314ecd33f62bb2bfb/1584370534064/LGMLogo.png 1000w" usemap="#image-map" />

</div>

<style>
.marginauto {
    margin: 0px auto 0px;
    display: block;
}
</style>

<map name="image-map">
    <area target="" alt="" title="" href="https://www.link1.com" coords="192,399,75" shape="circle">
<area target="" alt="" title="" href="https://www.link2.com" coords="387,399,75" shape="circle">
<area target="" alt="" title="" href="https://www.link3.com" coords="600,399,75" shape="circle">
<area target="" alt="" title="" href="https://www.link4.com" coords="805,399,75" shape="circle">
</map>

This defines 4 circular areas that are clickable on the image (the URLs above are dummy urls for this illustration - replace with your own)

It works fine, but the image is mostly fixed in size and position. You can adjust it a little with a spacer block.

Hope this helps.