creedon Posted April 28, 2021 Share Posted April 28, 2021 @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
laurensmithart Posted April 28, 2021 Share Posted 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 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> creedon 1 Link to comment
smgrant Posted October 11, 2021 Share Posted 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 <img src="" 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
creedon Posted October 11, 2021 Share Posted 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 1 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
smgrant Posted October 12, 2021 Share Posted October 12, 2021 Thank you, Creedon. It works like a charm! Can I throw you some $$? Link to comment
contentcaroline29 Posted March 30, 2022 Share Posted 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: <!-- 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> Link to comment
creedon Posted March 30, 2022 Share Posted March 30, 2022 (edited) 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 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
contentcaroline29 Posted March 31, 2022 Share Posted 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! Link to comment
creedon Posted March 31, 2022 Share Posted 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. 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
MTD Posted September 8, 2022 Share Posted 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. <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
creedon Posted September 8, 2022 Share Posted 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. 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
paraselene Posted September 8, 2022 Share Posted 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: <!-- 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
MTD Posted September 8, 2022 Share Posted 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: <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
creedon Posted September 8, 2022 Share Posted 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. 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 Posted September 8, 2022 Share Posted 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. 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
MTD Posted September 8, 2022 Share Posted September 8, 2022 Works like a charm! Thanks a million for all your assistance! creedon 1 Link to comment
paraselene Posted September 9, 2022 Share Posted 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 😄 Link to comment
creedon Posted September 9, 2022 Share Posted 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. 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
Pacoverde Posted October 27, 2022 Share Posted 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. Link to comment
derricksrandomviews Posted October 27, 2022 Share Posted October 27, 2022 (edited) 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 Link to comment
creationscape Posted October 30, 2023 Share Posted 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. Ziggy 1 Link to comment
NCOnline Posted September 16 Share Posted 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! <!-- Image Map Generated by http://www.image-map.net/ --> <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"> <map name="image-map"> <area target="_top" alt="Leadership Modules" title="Leadership Modules" href="https://www.4ctransformativelearning.org/leadership-modules" coords="1310,240,133" shape="circle"> <area target="_top" alt="4Cs Modules" title="4Cs Modules" href="https://www.4ctransformativelearning.org/4Cs-modules" coords="1000,760,130" shape="circle"> <area target="_top" alt="Curriculum Modules" title="Curriculum Modules" href="https://www.4ctransformativelearning.org/curriculum-modules" coords="586,909,127" shape="circle"> <area target="_top" alt="Teacher Education Modules" title="Teacher Education Modules" href="https://www.4ctransformativelearning.org/teacher-education-modules" coords="1384,778,127" shape="circle"> <area target="_top" alt="Evaluation of Impact Modules" title="Evaluation of Impact Modules" href="https://www.4ctransformativelearning.org/evaluation-modules" coords="1484,1098,96" shape="circle"> <area target="_top" alt="Learning Modules" title="Learning Modules" href="https://www.4ctransformativelearning.org/learning-modules" coords="667,515,128" shape="circle"> <area target="_top" alt="Assessment Modules" title="Assessment Modules" href="https://www.4ctransformativelearning.org/assessment-modules" coords="252,762,98" shape="circle"> <area target="_top" alt="Pedagogy Modules" title="Pedagogy Modules" href="https://www.4ctransformativelearning.org/pedagogy-modules" coords="1002,339,132" shape="circle"> <area target="_top" alt="Values Modules" title="Values Modules" href="https://www.4ctransformativelearning.org/values-modules" coords="1503,487,130" shape="circle"> <area target="_top" alt="Wellbeing Modules" title="Wellbeing Modules" href="https://www.4ctransformativelearning.org/wellbeing-modules" coords="562,151,103" shape="circle"> </map> Link to comment
creedon Posted September 17 Share Posted 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 1 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
NCOnline Posted September 17 Share Posted 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. Link to comment
creedon Posted September 18 Share Posted September 18 (edited) 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 NCOnline 1 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment