This was a great first start - especially the knowledge about using Embed and putting your code into the </> block. As a brand-new Squarespace user, just figuring out where to start a custom one-off - that was golden.
Unfortunately as soon as any scaling was applied to my image map (which can happen a surprising number of ways), the tediously built hotspots were not scaled. My map hotspots became non-sensical. Hence it was pretty fragile.
I stumbled across a solution recommended by one respondent on StackOverflow using an SVG wrapper around an image, with embedded anchor tags, themselves with embedded rectangles. This worked pretty well, turns out, and it scales for every reason I could throw at it in tests.
My code looks approximately like this:
<style>
div.mymap {
/* style the bounding box */
padding: 25px;
border-style: solid;
border-width: 3px;
border-color: #2A2829;
background-color: #E0E0DB;
}
</style>
<div class="mymap">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 817 536">
<image width="817" height="536" xlink:href="https://images.squarespace-cdn.com/content/v1/myimagehere.jpg"></image>
<style>
/* style the link behavior */
@namespace svg url(http://www.w3.org/2000/svg);
svg|a:hover {
outline: solid 5px #adadad;
}
svg|a:active {
outline: solid 5px #2A2829;
}
</style>
<a xlink:href="https://link1.html" target="_blank">
<rect x="0" y="95" fill="#fff" opacity="0" width="126" height="172"></rect>
</a>
<a xlink:href="https://link2.html" target="_blank">
<rect x="142" y="55" fill="#fff" opacity="0" width="125" height="174"></rect>
</a>
<a xlink:href="https://link3.html" target="_blank">
<rect x="421" y="0" fill="#fff" opacity="0" width="115" height="170"></rect>
</a>
<!-- etc -->
</svg>
</div>
You replace the <image xlink:href="foo"> attribute with your image URL, and I used the trick mentioned elsewhere in Squarespace support to find an image on my site and use my browser to copy the image address to their cdn hosted location.
Works like a charm. That said:
With the SVG standard you have to accept you're locking out a bunch of older browsers (don't know the cut-off, but imagine the usual IE chestnuts, etc). I personally don't mind the tradeoff for the 21st century and easier maintenance.
The location of the image into Squarespace CDN feels fragile - I don't have any guarantee that Squarespace wouldn't move my image to another location, but so far, the link is stable
Creating the list of anchors can be tedious - but I found (at the SO question page) https://imagemapper.noc.io/ to do the bulk of the work.
By experimentation I learned that a click is mapped to a target rectangle by traversing your list from bottom-to-top - so you should be sure that any overlapping elements of your map are ordered so that an element appearing in front of another follows the element it overlaps, in the list. This is the reverse of how typical image editors and even HTML <map> elements operate (their precedence order is typically top-to-bottom, like looking down at a stack of pancakes) and is probably reverse of how you might think about it.
I never figured out how to manage a bounded rectangle following my pointer, applied as a .hover rule, to hint the current target underneath the pointer. Tried CSS on rect, on a, and on cascades from svg, but no luck. I'm beginning to think this would require special SVG, and if anyone knows the answer, I'd appreciate a post here.
Figured it out - it was all here https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a - The <a> anchor in <svg> namespace is not the exact same thing as the <a> anchor in HTML, although conceptually it does the same thing. You need to define the namespace, then build CSS using the namespace to identify the anchor type you wish to style. Added to example above.
Here's the live site: https://wreckrc.com/press. Drag around the corner of your browser window to rescale the image, and notice the map still scales with it. This was the winner for me.
