Add Multiple Links on Top of Image

creedon · April 28, 2021

Give the following a go.

<!--

  responsive image map
  
  Version     : 0.1d0
  
  SS Versions : 7.0, 7.1
  
  Note        : adapted from code on stackoverflow < https://bit.ly/3eIcJUB > by
                hungerstar < https://bit.ly/3aMG6DU >
                
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <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;
      
      }
      
    /*
    
      the following can be used for diagnostic purposes, uncomment the code and
      the target areas for the links will be shown in red
      
      */
      
    /*
    
      .image-overlay-wrap a {
      
        fill : red;
        
        }
        
      */
      
    </style>
    
  <div class="image-overlay-wrap">
  
    <img src="https://static1.squarespace.com/static/5fb5a3e7d46ce137658ca653/t/6089722bf714c62bca560e56/1619620395930/impower_consult_REVISED-2.png" />
    
    <svg viewBox="0 0 5274 5129">
    
      <a alt="CONSULT_Overview" href="/overview" target="_blank" title="CONSULT_Overview" xlink:href="/overview">
      
        <circle cx="2635" cy="602" r="692" />
        
        </a>
        
      <a alt="CONSULT_Network-Referrals" href="/network-referrals" target="_blank" title="CONSULT_Network-Referrals" xlink:href="/network-referrals">
      
        <circle cx="4582" cy="1486" r="712" />
        
        </a>
        
      <a alt="CONSULT_Research" href="/research-2" target="_blank" title="CONSULT_Research" xlink:href="/research-2">
      
        <circle cx="4611" cy="3478" r="651" />
        
        </a>
        
      <a alt="CONSULT_Daycare" href="/daycare" target="_blank" title="CONSULT_Daycare" xlink:href="/daycare">
      
        <circle cx="2644" cy="4524" r="654" />
        
        </a>
        
      <a alt="CONSULT_Survivor-Support" href="/survivor-support" target="_blank" title="CONSULT_Survivor-Support" xlink:href="/survivor-support">
      
        <circle cx="608" cy="3478" r="650" />
        
        </a>
        
      <a alt="CONSULT_Classes-and-Training" href="/classes-and-training" title="CONSULT_Classes-and-Training" xlink:href="/classes-and-training">
      
        <circle cx="743" cy="1533" r="674" />
        
        </a>
        
      </svg>
      
    </div>

Let us know how it goes.

laurensmithart · April 28, 2021

@creedon

Thank you so much! That works 🙂

Can you help me with my code? Currently only one of my targets is clickable and it directs to the wrong link. And only in fullscreen. If I minimize the screen there are no clickable areas.

Here is the page: https://impowerunited.org/test-1

And here is the code that I generated:

</map>

smgrant · October 11, 2021

Hi Creedon,

Hoping you can help me convert this image-map code to responsive-happy svg? I've been trying myself without success. https://www.straussfeeds.com/your-infant-animal-nutrition-expert

creedon · October 11, 2021

7 hours ago, smgrant said:

Hoping you can help me convert this image-map code to responsive-happy svg?

Here you go.

<!--

  responsive image map
  
  Version     : 0.1d0
  
  SS Versions : 7.0, 7.1
  
  Note        : adapted from code on stackoverflow < https://bit.ly/3eIcJUB > by
                hungerstar < https://bit.ly/3aMG6DU >
                
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <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;
      
      }
      
    /*
    
      the following can be used for diagnostic purposes, uncomment the code and
      the target areas for the links will be shown in red
      
      */
      
    /*
    
      .image-overlay-wrap a {
      
        fill : red;
        
        }
        
      */
      
    </style>
    
  <div class="image-overlay-wrap">
  
    <img src="https://static1.squarespace.com/static/5e4c5392a45d2b3075129063/t/61645324ef0cae11364cc50d/1633964837430/strauss-sales-areas-contact.png" />
    
    <svg viewBox="0 0 4295 2791">
    
      <a alt="Chris Gorder" href="mailto:cgorder@straussfeeds.com" title="Chris Gorder" xlink:href="mailto:cgorder@straussfeeds.com">
      
        <polygon points="1110,1888,1189,1441,884,1380,944,974,500,854,549,557,576,489,655,384,681,278,587,229,448,260,429,508,335,711,324,809,278,907,301,1117,335,1260,380,1426,384,1474,557,1617,587,1696,275,1832,177,1866,218,1952,305,1888,542,2076,467,2125,497,2204,421,2189,436,2276,380,2343,361,2392,391,2471,467,2535,406,2603,248,2625,154,2652,403,2625,500,2588,583,2558,689,2528,805,2543,929,2648,997,2746,1053,2716,997,2614,847,2152,1084,2291,1306,2362,1520,2543,1535,2625,1629,2569,1546,2483,1437,2381,1159,2257,726,2088,587,2035,316,1843,775,1757,643,1693" />
        
        </a>
        
      <a alt="Erin Bronson" href="mailto:ebronson@straussfeeds.com" title="Erin Bronson" xlink:href="mailto:ebronson@straussfeeds.com">
      
        <polygon points="1200,1418,895,1365,948,970,512,831,561,549,689,278,865,316,862,241,843,150,907,124,963,162,914,244,910,323,1622,448,1610,636,1565,1121,1257,1095" />
        
        </a>
        
      <a alt="Dan Catherman" href="mailto:catherman@straussfeeds.com" title="Dan Catherman" xlink:href="mailto:catherman@straussfeeds.com">
      
        <polygon points="1633,440,2009,459,2043,733,1614,707,1595,910,1580,1061,1576,1125,1264,1113,1211,1426,1618,1474,1618,1520,1809,1538,1809,1689,2009,1749,2231,1779,2257,2091,2411,2140,2615,2144,2585,2042,2795,2001,2878,2073,2987,2024,3081,2110,3130,2264,3250,2407,3326,2396,3329,2279,3217,2061,3156,1937,3175,1821,3228,1760,3307,1775,3314,1843,3363,1877,3427,1873,3446,1821,3427,1760,3378,1734,3341,1753,3247,1723,3307,1648,3363,1606,3397,1550,3435,1520,3469,1448,3457,1373,3412,1313,3329,1230,3250,1174,3081,1166,3025,1226,2968,1298,2841,1279,2664,1388,2607,1392,2630,1313,2630,1222,2626,1132,2618,1076,2585,1016,2453,1061,2430,1019,2419,1106,2396,1177,2212,1177,2118,1185,2122,1226,2016,1238,1693,1207,1704,1151,1610,1132,1516,1117,1550,1136" />
        
        </a>
        
      <a alt="Suanne Blackwell" href="mailto:sblackwell@straussfeeds.com" title="Suanne Blackwell" xlink:href="mailto:sblackwell@straussfeeds.com">
      
        <polygon points="1851,2392,1995,2438,1984,2355,1991,2295,2149,2332,2161,2370,2187,2404,2232,2404,2262,2362,2255,2325,2228,2302,2179,2298,2018,2238,2085,2193,2153,2174,2187,2137,2258,2110,2247,1794,1875,1719,1807,1682,1811,1550,1626,1527,1630,1486,1212,1441,1148,1900,1200,1911,1234,1866,1389,1941,1438,2028,1457,2088,1543,2156,1622,2092,1697,2114,1746,2189,1802,2291" />
        
        </a>
        
      <a alt="Brian Briner" href="mailto:bbriner@straussfeeds.com" title="Brian Briner" xlink:href="mailto:bbriner@straussfeeds.com">
      
        <polygon points="2141,471,2020,474,2050,738,1622,726,1576,1121,1689,1148,1704,1208,2111,1227,2118,1182,2389,1174,2419,1027,2596,1009,2585,918,2604,869,2607,817,2573,836,2585,794,2555,741,2408,697,2385,655,2325,666,2374,610,2430,572,2385,542,2284,515,2227,365,2269,354,2291,305,2272,267,2224,252,2182,275,2171,316,2190,354,2231,508" />
        
        </a>
        
      <a alt="Alan Lauer" href="mailto:alauer@straussfeeds.com" title="Alan Lauer" xlink:href="mailto:alauer@straussfeeds.com">
      
        <polygon points="2438,651,2498,617,2525,639,2577,643,2630,666,2671,651,2728,628,2750,654,2788,654,2871,560,2844,527,2867,478,2897,455,2935,463,2961,497,2965,534,2946,560,2908,576,2795,677,2810,722,2848,752,2856,801,2841,839,2837,888,2874,858,2901,846,2916,895,2927,929,2916,959,2897,982,2893,1019,2905,1049,2953,1064,2995,1046,3032,1023,3048,997,3059,1046,3070,1083,3070,1128,3066,1166,3017,1222,2972,1286,2844,1275,2739,1347,2622,1380,2637,1076,2694,1016,2683,914,2671,854,2701,779,2739,737,2705,681,2649,733,2592,775,2502,696,2442,685" />
        
        </a>
        
      <a alt="Tim MacDonald" href="mailto:tmacdonald@straussfeeds.com" title="Tim MacDonald" xlink:href="mailto:tmacdonald@straussfeeds.com">
      
        <polygon points="3059,986,3085,1151,3213,1162,3311,1196,3386,1271,3435,1324,3476,1189,3503,1091,3589,1091,3616,1125,3661,1132,3695,1110,3706,1061,3687,1023,3638,1008,3597,1019,3593,1053,3484,1061,3495,1001,3537,952,3623,929,3680,884,3729,854,3653,809,3642,730,3680,658,3721,624,3777,609,3815,564,3774,508,3744,451,3698,380,3634,372,3589,425,3589,497,3586,560,3507,613,3401,647,3307,673,3303,730,3288,801,3228,839,3134,850,3145,884,3123,937" />
        
        </a>
        
      </svg>
      
    </div>

Let us know how it goes.

smgrant · October 12, 2021

Thank you, Creedon. It works like a charm! Can I throw you some $$?

contentcaroline29 · March 30, 2022

Hi @creedon - hoping you have some insight onto why this code isn't populating - just an image icon on the page. Attached is an image of the interactive map I was trying to build!

Code here:

<img src="Untitled design (2).png" usemap="#image-map">

creedon · March 30, 2022

On 3/29/2022 at 6:34 PM, contentcaroline29 said:

hoping you have some insight onto why this code isn't populating - just an image icon on the page.

It appears to me that the boxes are off.

Also just to reiterate. Image maps as generated by imagemap.net are not useable in today's responsive web design. They need to be converted to a modern standard using the techniques I've shown in my posts and code previously.

Don't get me wrong imagemap.net is a great tool to start the process of creating a responsive image map but it doesn't end there.

Edited September 8, 2022 by creedon

contentcaroline29 · March 31, 2022

Thank you @creedon! When you converting the code (newbie here) are you adding it to the page footer or to the already applied code? Thank you again!

creedon · March 31, 2022

1 hour ago, contentcaroline29 said:

are you adding it to the page footer or to the already applied code?

You can put the converted code anywhere you can place a code block.

MTD · September 8, 2022

Creedon,

I seem to have the same issue only I don't understand how to get the coordinates for the svg so that I can use your code pasted above.

Here is my image map code.

Here is the website where I am trying to place the code. https://aldapdobbs.squarespace.com/sa-map-2

Any assistance is greatly appreciated! Would love to understand how to convert these coordinates so that I can do it next time.

creedon · September 8, 2022

2 hours ago, MTD said:

only I don't understand how to get the coordinates for the svg so that I can use your code pasted above.

I've not gone into the details of how this is done as it can't be explained in a few easy to understand steps. You basically have to learn how HTML image maps work, learn how the SVG coordinate system works and then translate between the two. They are actually pretty compatible systems but how they each express a shape is different.

I examined your image map and it appears that there are some issues with the shapes.

The only tool I've found that works for image maps to svg based image maps is image-map.net.

If you provide output from image-map.net I might be able to help with a conversion.

paraselene · September 8, 2022

Hey there! I have the same question - i've used image-map.net and the output doesn't seem to work for me either. I've read through the svg/css stuff and i've also tried to use your template but unfortunately I don't really get it... if you wouldn't mind could you also help me? Heres the code:

<img src="https://images.squarespace-cdn.com/content/v1/6301d5edd37a5f4f460fcdd2/acb9e38c-aef2-4f99-b985-fc5f71f79fa5/untitled2.png" usemap="#image-map">

(I'm probably going to be swapping out the image with a cleaner version later, but the image dimension+hotspots will be exactly the same)

MTD · September 8, 2022

Thanks for the help.

The original came from image-map.net. Not sure why they are off but I redid the image map again using the image-map.net website. Here is the result:

creedon · September 8, 2022

4 hours ago, paraselene said:

if you wouldn't mind could you also help me?

<!--

  responsive image map template
  
  Version     : 0.1d0
  
  SS Versions : 7.0, 7.1
  
  Note        : adapted from code on stackoverflow < https://bit.ly/3eIcJUB > by
                hungerstar < https://bit.ly/3aMG6DU >
                
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <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;
      
      }
      
    /*
    
      the following can be used for diagnostic purposes, uncomment the code and
      the target areas for the links will be shown in red
      
      */
      
    /*
    
      .image-overlay-wrap a {
      
        fill : red;
        
        }
        
      */
      
    </style>
    
  <div class="image-overlay-wrap">
  
    <img src="https://images.squarespace-cdn.com/content/v1/6301d5edd37a5f4f460fcdd2/acb9e38c-aef2-4f99-b985-fc5f71f79fa5/untitled2.png" />
    
    <svg viewBox="0 0 2500 1667">
    
      <a alt="Projects" href="/#projects" title="Projects" xlink:href="fox-chihuahua-df3j.squarespace.com/#projects">
      
        <polygon points="976,166,848,912,1798,1183,1917,437" />
        
        </a>
        
      <a alt="About" href="/about" title="About" xlink:href="fox-chihuahua-df3j.squarespace.com/about">
      
        <polygon points="2052,1157,1546,1426,1546,1477,1961,1623,2443,1360,2443,1285" />
        
        </a>
              
      </svg>
      
    </div>

Let us know how it goes.

creedon · September 8, 2022

2 hours ago, MTD said:

Not sure why they are off but I redid the image map again using the image-map.net website.

<!--

  responsive image map template
  
  Version     : 0.1d0
  
  SS Versions : 7.0, 7.1
  
  Note        : adapted from code on stackoverflow < https://bit.ly/3eIcJUB > by
                hungerstar < https://bit.ly/3aMG6DU >
                
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <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;
      
      }
      
    /*
    
      the following can be used for diagnostic purposes, uncomment the code and
      the target areas for the links will be shown in red
      
      */
      
    /*
    
      .image-overlay-wrap a {
      
        fill : red;
        
        }
        
      */
      
    </style>
    
  <div class="image-overlay-wrap">
  
    <img src="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631389ece3bb8d181406fac6/1662224879647/SA+Map+Background.png" />
    
    <svg viewBox="0 0 1224 1121">
    
      <a alt="Train Depot" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382f99bf3e53d3dc2d6f3/1662223098308/Train+Depot.JPG" title="Train Depot" xlink:href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382f99bf3e53d3dc2d6f3/1662223098308/Train+Depot.JPG">
      
        <rect height="77" width="77" x="139" y="239" />
        
        </a>
        
      <a alt="Santa Rosa" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382d4563f5e2b328ba35d/1662223061574/Santa+Rosa.JPG" title="Santa Rosa" xlink:href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382d4563f5e2b328ba35d/1662223061574/Santa+Rosa.JPG">
      
        <rect height="83" width="84" x="417" y="242" />
        
        </a>
        
      <a alt="St. Mary's" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382e7c6eb82111a63cbd5/1662223080140/St.+Mary%27s+.JPG" title="St. Mary's" xlink:href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382e7c6eb82111a63cbd5/1662223080140/St.+Mary%27s+.JPG">
      
        <rect height="83" width="88" x="768" y="294" />
        
        </a>
        
      <a alt="Alamo Plaza" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382616bfb513f9048792f/1662222947127/Alamo+Plaza.JPG" title="Alamo Plaza" xlink:href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382616bfb513f9048792f/1662222947127/Alamo+Plaza.JPG">
      
        <rect height="75" width="89" x="946" y="297" />
        
        </a>
        
      <a alt="Market Square" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/63138293a9a17d3dc0338d85/1662222996856/Market+Square.JPG" title="Market Square" xlink:href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/63138293a9a17d3dc0338d85/1662222996856/Market+Square.JPG">
      
        <rect height="73" width="89" x="403" y="357" />
        
        </a>
        
      <a alt="Iron Bridge" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6313827fbe442a69e8908ff5/1662222976491/Iron+Bridge.JPG" title="Iron Bridge" xlink:href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6313827fbe442a69e8908ff5/1662222976491/Iron+Bridge.JPG">
      
        <rect height="82" width="90" x="891" y="386" />
        
        </a>
        
      <a alt="Navarro School" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382a6c6eb82111a63bf56/1662223016248/Navaro+School.JPG" title="Navarro School" xlink:href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382a6c6eb82111a63bf56/1662223016248/Navaro+School.JPG">
      
        <rect height="78" width="86" x="233" y="581" />
        
        </a>
        
      <a alt="Wasp's Nest" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6313830c9bfffb06c8e2fedf/1662223117500/Wasp%27s+Nest.JPG" title="Wasp's Nest" xlink:href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6313830c9bfffb06c8e2fedf/1662223117500/Wasp%27s+Nest.JPG">
      
        <rect height="79" width="81" x="370" y="627" />
        
        </a>
        
      <a alt="San Pedro Creek" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382be9bfffb06c8e2fab7/1662223038791/San+Pedro+Creek.JPG" title="San Pedro Creek" xlink:href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382be9bfffb06c8e2fab7/1662223038791/San+Pedro+Creek.JPG">
      
        <rect height="86" width="84" x="310" y="823" />
        
        </a>
        
      <a alt="Wesley House" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6313831f8f71a31aacfdf313/1662223135993/Wesley+House.JPG" title="Wesley House" xlink:href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6313831f8f71a31aacfdf313/1662223135993/Wesley+House.JPG">
      
        <rect height="85" width="82" x="367" y="954" />
        
        </a>
                              
      </svg>
      
    </div>

The output from image-map.net looks much better this time around.

Let us know how it goes.

MTD · September 8, 2022

Works like a charm! Thanks a million for all your assistance!

paraselene · September 9, 2022

11 hours ago, creedon said:

Let us know how it goes.

It works! Thanks so much!

Do you think it's possible to swap out the image with a gif or a video by changing 'src'? I'd just like to animate it a bit (the clickable areas stay exactly the same). If not, that's fine too, this is honestly good enough 😄

creedon · September 9, 2022

10 minutes ago, paraselene said:

Do you think it's possible to swap out the image

Image swap yes. As long as the image is the same size as the previous image.

Video I don't know.

Pacoverde · October 27, 2022

On 7/30/2020 at 11:15 AM, derricksrandomviews said:

Once you have the code, create your code block above the image, once you see that it is working you will know because there will be two images one one over the other, delete the original image block leaving the code block.

What is meant by "create your code block above the image"? I've got my code block from your nifty tool, but I don't know how to "create a code block above the image.

derricksrandomviews · October 27, 2022

The images are simply on the same page, one standard in an image block and one interactive, which is inside the code block, but it isn't necessary to do so.

This is a good interactive map creator that can assign links to any spot on the image, any image:

https://www.georeferencer.com/

Edited October 27, 2022 by derricksrandomviews

creationscape · October 30, 2023

For anyone looking for an all in one solution to this problem. This site creates the image map and converts it into a responsive SVG for your site in one easy step!

A HUGE shoutout and THANK YOU to @Ziggy for this solution! You are a real hero.

NCOnline · September 16

Not sure if you're still doing these svg conversions, but if so, I'd appreciate it as the code alone isn't working - thx!

<img src="https://static1.squarespace.com/static/5ffcdb23ad5a072f2a7f9730/t/66e7ce02dcd52d5d3736b4b0/1726467586740/Node+Version+5+-+Simple+Only.jpghttps://static1.squarespace.com/static/5ffcdb23ad5a072f2a7f9730/t/66e7ce02dcd52d5d3736b4b0/1726467586740/Node+Version+5+-+Simple+Only.jpg.form-wrapper .field-list .date {" usemap="#image-map">

creedon · September 17

On 9/16/2024 at 12:14 AM, NCOnline said:

I'd appreciate it as the code alone isn't working

The code you posted is not responsive so it will only work in very limited viewport sizes. Hence the need for a conversion to a responsive SVG.

<!--

  responsive image map template
  
  License     : < https://tinyurl.com/s872fb68 >
  
  Version     : 0.1d0
  
  SS Versions : 7.0, 7.1
  
  Note        : adapted from code on stackoverflow < https://bit.ly/3eIcJUB > by
                hungerstar < https://bit.ly/3aMG6DU >
                
  By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <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;
      
      }
      
    /*
    
      the following can be used for diagnostic purposes, uncomment the code and
      the target areas for the links will be shown in red
      
      */
      
    /*
    
      .image-overlay-wrap a {
      
        fill : red;
        
        }
        
      */
      
    </style>
    
  <div class="image-overlay-wrap">
  
    <img src="https://static1.squarespace.com/static/5ffcdb23ad5a072f2a7f9730/t/66e7ce02dcd52d5d3736b4b0/1726467586740/Node+Version+5+-+Simple+Only.jpg" />
    
    <svg viewBox="0 0 1623 1148">
    
      <a alt="Leadership Modules" href="https://www.4ctransformativelearning.org/leadership-modules" target="_top" title="Leadership Modules" xlink:href="https://www.4ctransformativelearning.org/leadership-modules">
      
        <circle cx="1225" cy="215" r="133" />
        
        </a>
        
      <a alt="4Cs Modules" href="https://www.4ctransformativelearning.org/4Cs-modules" target="_top" title="4Cs Modules" xlink:href="https://www.4ctransformativelearning.org/4Cs-modules">
      
        <circle cx="925" cy="710" r="130" />
        
        </a>
        
      <a alt="Curriculum Modules" href="https://www.4ctransformativelearning.org/curriculum-modules" target="_top" title="Curriculum Modules" xlink:href="https://www.4ctransformativelearning.org/curriculum-modules">
      
        <circle cx="546" cy="834" r="127" />
        
        </a>
        
      <a alt="Teacher Education Modules" href="https://www.4ctransformativelearning.org/teacher-education-modules" target="_top" title="Teacher Education Modules" xlink:href="https://www.4ctransformativelearning.org/teacher-education-modules">
      
        <circle cx="1284" cy="713" r="127" />
        
        </a>
        
      <a alt="Evaluation of Impact Modules" href="https://www.4ctransformativelearning.org/evaluation-modules" target="_top" title="Evaluation of Impact Modules" xlink:href="https://www.4ctransformativelearning.org/evaluation-modules">
      
        <circle cx="1374" cy="1018" r="96" />
        
        </a>
        
      <a alt="Learning Modules" href="https://www.4ctransformativelearning.org/learning-modules" target="_top" title="Learning Modules" xlink:href="https://www.4ctransformativelearning.org/learning-modules">
      
        <circle cx="617" cy="480" r="128" />
        
        </a>
        
      <a alt="Assessment Modules" href="https://www.4ctransformativelearning.org/assessment-modules" target="_top" title="Assessment Modules" xlink:href="https://www.4ctransformativelearning.org/assessment-modules">
      
        <circle cx="232" cy="702" r="98" />
        
        </a>
        
      <a alt="Pedagogy Modules" href="https://www.4ctransformativelearning.org/pedagogy-modules" target="_top" title="Pedagogy Modules" xlink:href="https://www.4ctransformativelearning.org/pedagogy-modules">
      
        <circle cx="937" cy="314" r="132" />
        
        </a>
        
      <a alt="Values Modules" href="https://www.4ctransformativelearning.org/values-modules" target="_top" title="Values Modules" xlink:href="https://www.4ctransformativelearning.org/values-modules">
      
        <circle cx="1398" cy="457" r="130" />
        
        </a>
        
      <a alt="Wellbeing Modules" href="https://www.4ctransformativelearning.org/wellbeing-modules" target="_top" title="Wellbeing Modules" xlink:href="https://www.4ctransformativelearning.org/wellbeing-modules">
      
        <circle cx="512" cy="136" r="103" />
        
        </a>
                                                                                        																									                              
      </svg>
      
    </div>

Let us know how it goes.

NCOnline · September 17

@creedon It's worked a treat, thank you so much. https://www.4ctransformativelearning.org/ (about half way down the page - graphic with the bit dots).
In one of your previous posts you seemed to mention a website that does this SVG mapping stuff - is there somewhere? Coz I think I'll be needing to do another image soon.
Thanks again.

creedon · September 18

3 hours ago, NCOnline said:

In one of your previous posts you seemed to mention a website that does this SVG mapping stuff - is there somewhere? Coz I think I'll be needing to do another image soon.

I don't recall mentioning a site that does responsive image map type SVGs. I think @Ziggy mentioned one but did not post a URL.

Edited September 18 by creedon

Add Multiple Links on Top of Image

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

jbekker

laurensmithart

creedon

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources