jbekker

Thank you for the help Creedon! the code worked perfectly. I really appreciate the assistance. 

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>