I'm also struggling to get my links to line up with my image. While trying to fix the problem I definitely messed up my code. What is my best way forward?
<style>
.image-overlay-wrap {
display: inline-block; /* shrinks container to image size */
fill: transparent;
position: relative;
}
.image-overlay-wrap img { /* optional, for responsiveness */
display: block;
height: auto;
max-width: 100%;
}
.image-overlay-wrap svg {
left: 0;
position: absolute;
top: 0;
}
</style>
<div class="image-overlay-wrap">
<img src="https://static1.squarespace.com/static/5553b4b0e4b0bc7084971a20/t/600cad4e5e998e7830fb8951/1611443535932/Screen+Shot+2021-01-23+at+3.52.27+PM.png" usemap="#image-map" />
<svg viewBox="0 0 2088 1574">
<map name="image-map">
<area target="_blank" alt="Compassion" title="Compassion" href="https://www.mybestself101.org/compassion" coords="855,847,1257,978,855,976,1259,853,2084,1436,2,4,2088,1574" shape="rect">
<area target="_blank" alt="Exercise" title="Exercise" href="https://www.mybestself101.org/exercise" coords="1558,1004,1804,1081" shape="rect">
<area target="_blank" alt="Flow" title="Flow" href="https://www.mybestself101.org/flow" coords="1473,812,1881,871" shape="rect">
<area target="_blank" alt="Gratitude" title="Gratitude" href="https://www.mybestself101.org/gratitude" coords="275,1000,543,1081" shape="rect">
<area target="_blank" alt="Mindfulness" title="Mindfulness" href="https://www.mybestself101.org/mindfulness" coords="253,812,556,875" shape="poly">
<area target="_blank" alt="Optimism" title="Optimism" href="https://www.mybestself101.org/optimism" coords="279,1098,537,1176" shape="poly">
<area target="_blank" alt="Personal" title="Personal" href="https://www.mybestself101.org/personal-growth-module" coords="1471,709,1891,782" shape="poly">
<area target="_blank" alt="Purpose" title="Purpose" href="https://www.mybestself101.org/purpose" coords="294,607,530,694" shape="poly">
<area target="_blank" alt="Savoring" title="Savoring" href="https://www.mybestself101.org/savoring" coords="279,899,541,982" shape="poly">
<area target="_blank" alt="Self-compassion" title="Self-compassion" href="https://www.mybestself101.org/self-compassion" coords="1475,908,1900,984" shape="poly">
<area target="_blank" alt="Supportive Relationships" title="Supportive Relationships" href="https://www.mybestself101.org/supportive-relationships" coords="846,596,1233,758" shape="poly">
<area target="_blank" alt="The Basics" title="The Basics" href="https://www.mybestself101.org/21day-personal-growth-experiment" coords="262,1321,1817,1428" shape="poly">
</map>
