Jump to content

Overlay Multiple Links onto One Image

Recommended Posts

Site URL: https://arugula-vibraphone-p4m3.squarespace.com/

I am trying to use custom HTML to display an image with multiple links depending on where you click (site link; password is password). Each icon in the example should have a different link. 

I've used image-map.net to generate custom HTML for an image map, and while it displays the image correctly, none of the links appear to be working. 

The HTML I'm using is below (note that none of the URLs linked are active pages yet): 

<img src="https://static1.squarespace.com/static/61e41ea1bb3de93bd456af16/t/62150cc35dd3701b83f7cd07/1645546694716/JennaMoormancomplete1.jpg" usemap="#image-map">

<map name="image-map">
    <area target="" alt="" title="" href="mikesthirtieth.com/alex-eric" coords="1682,763,2739,866" shape="rect">
    <area target="" alt="" title="" href="mikesthirtieth.com/matt-provenzano" coords="1868,1033,2608,1482" shape="rect">
    <area target="" alt="" title="" href="mikesthirtieth.com/ashley-ty" coords="1260,1236,175" shape="circle">
    <area target="" alt="" title="" href="mikesthirtieth.com/anthony" coords="2834,1029,3220,1478" shape="rect">
    <area target="" alt="" title="" href="mikesthirtieth.com/irene" coords="831,1363,950,1391,1006,1494,1109,1601,1197,1641,1276,1689,1260,1752,1232,1796,1161,1768,1165,1709,1165,1649,1069,1705,918,1701,799,1526,795,1423" shape="poly">
    <area target="" alt="" title="" href="mikesthirtieth.com/alex-cuadrado" coords="1845,4073,2667,4554" shape="rect">
    <area target="" alt="" title="" href="mikesthirtieth.com/lilli" coords="1367,2342,735,1957" shape="rect">
    <area target="" alt="" title="" href="mikesthirtieth.com/rachel" coords="819,2605,871,2553,1026,2517,1181,2561,1276,2597,1288,2692,1216,2799,1141,2839,954,2835,827,2720" shape="poly">
    <area target="" alt="" title="" href="mikesthirtieth.com/nick" coords="779,2998,1304,3526" shape="rect">
    <area target="" alt="" title="" href="mikesthirtieth.com/tim" coords="1566,1985,1554,1925,1495,1862,1491,1671,1534,1536,1530,1480,1554,1464,1570,1218,1606,1210,1654,1285,1674,1341,1701,1409,1682,1476,1693,1762,1729,1834,1729,1925,1693,1937,1693,1993,1634,2017" shape="poly">
    <area target="" alt="" title="" href="mikesthirtieth.com/reca" coords="2011,2175,1924,1945,2015,1703,2123,1639,2230,1599,2349,1655,2429,1718,2544,1993,2449,2152,2230,2179" shape="poly">
    <area target="" alt="" title="" href="mikesthirtieth.com/mary-kathryn" coords="2747,2215,2699,2017,2687,1746,2723,1651,2807,1635,2818,1683,2814,1842,2882,1846,2966,1667,3005,1655,3053,1691,3053,1794,2997,1897,2934,2084,2894,2223,2822,2255,2767,2247" shape="poly">
    <area target="" alt="" title="" href="mikesthirtieth.com/jenna" coords="1884,2362,2604,3209" shape="rect">
    <area target="" alt="" title="" href="mikesthirtieth.com/jared" coords="3160,3046,3784,3447" shape="rect">
    <area target="" alt="" title="" href="mikesthirtieth.com/martha-jim-1" coords="1511,2195,1713,3077" shape="rect">
    <area target="" alt="" title="" href="mikesthirtieth.com/martha-jim-2" coords="1614,3276,1542,3304,1499,3379,1507,3455,1534,3515,1538,3574,1527,3634,1527,3705,1594,3709,1614,4146,1654,4142,1654,3713,1737,3717,1785,3666,1733,3610,1701,3570,1705,3534,1737,3503,1749,3451,1761,3399,1737,3328,1689,3288" shape="poly">
    <area target="" alt="" title="" href="mikesthirtieth.com/matt" coords="1825,4870,2035,4766,2139,4703,2584,4802,2663,4937,2655,5040,2433,5104,2015,5108,1789,5032,1749,4937" shape="poly">
    <area target="" alt="" title="" href="mikesthirtieth.com/abbie" coords="2019,3419,2107,3368,2214,3356,2330,3360,2433,3411,2489,3503,2465,3602,2417,3630,2393,3904,2182,3916,2095,3848,2047,3614,2004,3586,1988,3499,1988,3451" shape="poly">
    <area target="" alt="" title="" href="mikesthirtieth.com/justin" coords="3204,2533,3168,2597,3168,2772,3335,2827,3725,2879,3792,2783,3792,2585,3435,2454" shape="poly">
    <area target="" alt="" title="" href="mikesthirtieth.com/jeff" coords="3148,3626,3280,3622,3765,3785,3804,4015,3657,4039,3458,3948,3435,3864,3184,3753,3144,3689" shape="poly">
    <area target="" alt="" title="" href="mikesthirtieth.com/benny" coords="2902,4484,2779,4619,2795,4794,2902,4881,3009,4874,3093,4754,3065,4583,3025,4496" shape="poly">
    <area target="" alt="" title="" href="mikesthirtieth.com/tom" coords="1487,4520,250" shape="circle">
    <area target="" alt="" title="" href="mikesthirtieth.com/lisa" coords="2671,3618,2767,3542,2759,3268,2970,3252,2970,3662,2719,3745,2659,3685" shape="poly">
    <area target="" alt="" title="" href="mikesthirtieth.com/robbie" coords="3053,4289,2811,3868" shape="rect">
    <area target="" alt="" title="" href="mikesthirtieth.com/nick" coords="851,3717,1344,4158" shape="rect">
    <area target="" alt="" title="" href="mikesthirtieth.com/martha-jim-1" coords="3152,1866,3606,2303" shape="rect">
    <area target="" alt="" title="" href="mikesthirtieth.com/marcey-rob" coords="3276,3987,3272,4242,3144,4274,3172,4579,3256,4595,3280,4854,3403,4870,3423,4579,3502,4548,3502,4262,3375,4218,3375,3983" shape="poly">
    <area target="" alt="" title="" href="mikesthirtieth.com/marcey-rob" coords="2834,2398,2910,2390,2934,2625,2970,2660,2985,3058,2763,3058,2743,2680,2803,2621" shape="poly">
    <area target="" alt="" title="" href="mikesthirtieth.com/lilli" coords="3228,1607,3371,1512,3395,1297,3486,1293,3558,1516,3502,1639,3359,1687,3232,1671" shape="poly">
</map>

 

Link to comment
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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.