Jump to content

Add Multiple Links on Top of Image

Recommended Posts

@laurensmithart

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@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 name="image-map">

    <area target="_blank" alt="CONSULT_Overview" title="CONSULT_Overview" href="https://impowerunited.org/overview" coords="2635,602,692" shape="circle">

    <area target="_blank" alt="CONSULT_Network-Referrals" title="CONSULT_Network-Referrals" href="https://impowerunited.org/network-referrals" coords="4582,1486,712" shape="circle">

    <area target="_blank" alt="CONSULT_Research" title="CONSULT_Research" href="https://impowerunited.org/research-2" coords="4611,3478,651" shape="circle">

    <area target="_blank" alt="CONSULT_Daycare" title="CONSULT_Daycare" href="https://impowerunited.org/daycare" coords="2644,4524,654" shape="circle">

    <area target="_blank" alt="CONSULT_Survivor-Support" title="CONSULT_Survivor-Support" href="https://impowerunited.org/survivor-support" coords="608,3478,650" shape="circle">

    <area target="" alt="CONSULT_Classes-and-Training" title="CONSULT_Classes-and-Training" href="https://impowerunited.org/classes-and-training" coords="743,1533,674" shape="circle">

</map>

 

Link to comment
  • 5 months later...

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

 


<img src="strauss-sales-areas-contact.png" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="Chris Gorder" title="Chris Gorder" href="mailto:cgorder@straussfeeds.com" coords="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" shape="poly">
    <area target="_blank" alt="Erin Bronson" title="Erin Bronson" href="mailto:ebronson@straussfeeds.com" coords="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" shape="poly">
    <area target="_blank" alt="Dan Catherman" title="Dan Catherman" href="mailto:catherman@straussfeeds.com" coords="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" shape="poly">
    <area target="_blank" alt="Suanne Blackwell" title="Suanne Blackwell" href="mailto:sblackwell@straussfeeds.com" coords="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" shape="poly">
    <area target="_blank" alt="Brian Briner" title="Brian Briner" href="mailto:bbriner@straussfeeds.com " coords="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" shape="poly">
    <area target="_blank" alt="Alan Lauer" title="Alan Lauer" href="mailto:alauer@straussfeeds.com" coords="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" shape="poly">
    <area target="_blank" alt="Tim MacDonald" title="Tim MacDonald" href="mailto:tmacdonald@straussfeeds.com" coords="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" shape="poly">
</map>

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 5 months later...

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: 

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="Untitled design (2).png" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="Emmet County Contact" title="Emmet County Contact" href="https://www.nciagintheclassroom.org/emmet-contact" coords="548,164,507,142" shape="rect">
    <area target="_blank" alt="Kossuth County Contact" title="Kossuth County Contact" href="https://www.nciagintheclassroom.org/kossuth-contact" coords="599,218,567,147" shape="rect">
    <area target="_blank" alt="Winnebago County Contact" title="Winnebago County Contact" href="https://www.nciagintheclassroom.org/kossuth-contact" coords="623,148,653,163" shape="rect">
    <area target="_blank" alt="Hancock County Contact" title="Hancock County Contact" href="https://www.nciagintheclassroom.org/hancock-contact" coords="624,184,659,222" shape="rect">
    <area target="_blank" alt="Wright County Contact" title="Wright County Contact" href="https://www.nciagintheclassroom.org/wright-contact" coords="614,240,658,276" shape="rect">
    <area target="_blank" alt="Worth County Contact" title="Worth County Contact" href="https://www.nciagintheclassroom.org/worth-contact" coords="678,148,717,165" shape="rect">
    <area target="_blank" alt="Cerro Gordo Contact" title="Cerro Gordo Contact" href="https://www.nciagintheclassroom.org/cerro-gordo-contact" coords="673,184,714,218" shape="rect">
    <area target="_blank" alt="Franklin County Contact" title="Franklin County Contact" href="https://www.nciagintheclassroom.org/franklin-contact" coords="677,239,714,277" shape="rect">
    <area target="_blank" alt="Hardin County Contact" title="Hardin County Contact" href="https://www.nciagintheclassroom.org/hardin-contact" coords="677,293,720,338" shape="rect">
    <area target="_blank" alt="Webster County Contact" title="Webster County Contact" href="https://www.nciagintheclassroom.org/webster-contact" coords="556,279,607,339" shape="rect">
</map>

Screen Shot 2022-03-29 at 6.33.49 PM.png

Link to comment
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.

2035535350_ScreenShot2022-03-29at8_05_19PM.png.f529e51ee85215b396f42274b4e4d717.png

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 by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 5 months later...

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.

<img src="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631389ece3bb8d181406fac6/1662224879647/SA+Map+Background.png" usemap="#image-map">

<map name="image-map">
    <area target="_top" alt="Train Depot" title="Train Depot" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382f99bf3e53d3dc2d6f3/1662223098308/Train+Depot.JPG" coords="220,313,133,238" shape="rect">
    <area target="_top" alt="Santa Rosa" title="Santa Rosa" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382d4563f5e2b328ba35d/1662223061574/Santa+Rosa.JPG" coords="412,245,498,319" shape="rect">
    <area target="_top" alt="St. Mary's" title="St. Mary's" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382e7c6eb82111a63cbd5/1662223080140/St.+Mary%27s+.JPG" coords="851,376,779,297" shape="rect">
    <area target="_top" alt="Alamo Plaza" title="Alamo Plaza" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382616bfb513f9048792f/1662222947127/Alamo+Plaza.JPG" coords="1035,375,955,297" shape="rect">
    <area target="_top" alt="Market Square" title="Market Square" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/63138293a9a17d3dc0338d85/1662222996856/Market+Square.JPG" coords="408,355,489,430" shape="rect">
    <area target="_top" alt="Iron Bridge" title="Iron Bridge" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6313827fbe442a69e8908ff5/1662222976491/Iron+Bridge.JPG" coords="895,388,979,464" shape="rect">
    <area target="_top" alt="Navarro School" title="Navarro School" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382a6c6eb82111a63bf56/1662223016248/Navaro+School.JPG" coords="233,582,319,661" shape="rect">
    <area target="_top" alt="Wasp's Nest" title="Wasp's Nest" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6313830c9bfffb06c8e2fedf/1662223117500/Wasp%27s+Nest.JPG" coords="364,628,449,703" shape="rect">
    <area target="_top" alt="San Pedro Creek" title="San Pedro Creek" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382be9bfffb06c8e2fab7/1662223038791/San+Pedro+Creek.JPG" coords="316,829,391,904" shape="rect">
    <area target="_top" alt="Wesley House" title="Wesley House" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6313831f8f71a31aacfdf313/1662223135993/Wesley+House.JPG" coords="368,959,448,1034" shape="rect">
</map>

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. 

Link to comment
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.

1995677890_ScreenShot2022-09-07at8_55_33PM.thumb.png.0f7944bb62b3aab8e0de8854adfa7009.png

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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:

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://images.squarespace-cdn.com/content/v1/6301d5edd37a5f4f460fcdd2/acb9e38c-aef2-4f99-b985-fc5f71f79fa5/untitled2.png" usemap="#image-map">

<map name="image-map">
    <area target="_self" alt="Projects" title="Projects" href="fox-chihuahua-df3j.squarespace.com/#projects" coords="976,166,848,912,1798,1183,1917,437" shape="poly">
    <area target="_self" alt="About" title="About" href="fox-chihuahua-df3j.squarespace.com/about" coords="2052,1157,1546,1426,1546,1477,1961,1623,2443,1360,2443,1285" shape="poly">
</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)

Link to comment

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:

<img src="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631389ece3bb8d181406fac6/1662224879647/SA+Map+Background.png" usemap="#image-map">

<map name="image-map">
    <area target="" alt="Train Depot" title="Train Depot" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382f99bf3e53d3dc2d6f3/1662223098308/Train+Depot.JPG" coords="139,239,216,316" shape="rect">
    <area target="" alt="Santa Rosa" title="Santa Rosa" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382d4563f5e2b328ba35d/1662223061574/Santa+Rosa.JPG" coords="417,242,501,325" shape="rect">
    <area target="" alt="St. Mary's" title="St. Mary's" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382e7c6eb82111a63cbd5/1662223080140/St.+Mary%27s+.JPG" coords="768,294,856,377" shape="rect">
    <area target="" alt="Alamo Plaza" title="Alamo Plaza" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382616bfb513f9048792f/1662222947127/Alamo+Plaza.JPG" coords="946,297,1035,372" shape="rect">
    <area target="" alt="Market Square" title="Market Square" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/63138293a9a17d3dc0338d85/1662222996856/Market+Square.JPG" coords="403,357,492,430" shape="rect">
    <area target="" alt="Iron Bridge" title="Iron Bridge" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6313827fbe442a69e8908ff5/1662222976491/Iron+Bridge.JPG" coords="891,386,981,468" shape="rect">
    <area target="" alt="Navarro School" title="Navarro School" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382a6c6eb82111a63bf56/1662223016248/Navaro+School.JPG" coords="233,581,319,659" shape="rect">
    <area target="" alt="Wasp's Nest" title="Wasp's Nest" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6313830c9bfffb06c8e2fedf/1662223117500/Wasp%27s+Nest.JPG" coords="370,627,451,706" shape="rect">
    <area target="" alt="San Pedro Creek" title="San Pedro Creek" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/631382be9bfffb06c8e2fab7/1662223038791/San+Pedro+Creek.JPG" coords="310,823,394,909" shape="rect">
    <area target="" alt="Wesley House" title="Wesley House" href="https://static1.squarespace.com/static/5eb716e0863bca1e3322510f/t/6313831f8f71a31aacfdf313/1662223135993/Wesley+House.JPG" coords="367,954,449,1039" shape="rect">
</map>

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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 😄

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...
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.

Link to comment
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.