Add Multiple Links on Top of Image

Is it possible to add multiple links or buttons on top of a single image? I've got an image I want to use as my navigation, but I can only add one link. I tried chopping up the imaged into different blocks and add them individually, but then they don't line up. Is there no way to do what I'm trying to do in SquareSpace? Or is there some CSS code that would help?

Thanks in advance

Can you share link to your site + image url?

It's not up anywhere yet. I'm in the building stage. But I may have come up with a solution. If it's the right solution, who knows? I started dragging the image boxes to make them bigger until they lined up. I had redone the backgrounds so they were all on the same plane. Of course, maybe I could've just resized the image boxes with the older backgrounds.

Of course if there's a better way than to split them up, that'd be swell.

I just learned about your question. I just posted this for someone asking the same thing, and I am doing this on a site I have up. 

 You would treat the image like a map, with different spots linking to a page either on site or off site. You would do this with HTML code in a code block, The areas in the image can be any size and just about any shape. 

Directions and code are here: https://www.image-map.net/

You upload the image you want to use into custom files on your Squarespace site, that is done by going to custom css and at the bottom of the panel is the manage custom files button. You select that and then you upload the image there. Once loaded you click the image button, the address is pasted at the top of the code panel. You copy it from there but don't save it on the panel. That address is then pasted into the load image from website field. I copied that address into wordpad along with the code I generated, because that is going to work as my backup. 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. 

In the past, I have used on one of my sites, an image of a resort site plan with lots for sale, and viewers could click on each lot and it took them to a sales page.

My suggestion is to generate the code, paste it into wordpad and save it and also paste the code from the generator into your site. This is a hover effect so it will not work with mobile, the code is ignored, so keep that in mind. 

I am here if you have any questions or need help. 

dlp

Hello there, I require some assistance. I created an image map on https://www.image-map.net/, but although there are two parts of the imaged mapped, they both lead to the same webpage. Any advice on how to fix this?

@CeceDev

Please post the URL to the page where you have this image map.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Try the following.

<img src="https://static1.squarespace.com/static/5f356966316e824623ec3a7c/t/5f7b3f1c8556c9098790ab40/1601912604447/ccf-mms_03.png" usemap="#image-map">
<map name="image-map">
    <area target="" alt="" title="" href="https://www.modernmysteryschoolint.com/" coords="0,0,426,105" shape="rect">
    <area target="" alt="" title="" href="https://certifiedcoachesfederation.com/" coords="427,0,570,105" shape="rect">
</map>

The coords are left, top, right, bottom px (x1, y1, x2, y2).

I used rects all around. You can of course narrow down the coords or change the shapes.

Let us know how it goes.

Thanks for the quick reply and help. Unfortunately the problem still persists 

@CeceDev

I see the problem. Image maps don't do well in a responsive situations.

I suggest a change of method.

Add the following to a new code block.

<style>

  .image-overlay-wrap {
  
    display: inline-block; /* shrinks container to image size */
    fill: transparent;
    position: relative;
    
    }
    
  .image-overlay-wrap img { /* optional, for responsiveness */
  
    display: block;
    height: auto;
    max-width: 100%;
    
    }
    
  .image-overlay-wrap svg {
  
    left: 0;
    position: absolute;
    top: 0;
    
    }
    
  </style>

<div class="image-overlay-wrap">

  <img src="https://static1.squarespace.com/static/5f356966316e824623ec3a7c/t/5f7b3f1c8556c9098790ab40/1601912604447/ccf-mms_03.png" />
  
  <svg viewBox="0 0 570 105">
  
    <a xlink:href="https://www.modernmysteryschoolint.com/">
    
      <rect height="105" width="426" />
      
	    </a>
      
    <a xlink:href="https://certifiedcoachesfederation.com/">
    
      <rect x="426" height="105" width="145" />
      
	    </a>
      
    </svg>
    
  </div>

I adapted this from some code I found on stackoverflow from an answer by hungerstar.

We basically create an image overlay and the overlay is an svg. The svg adapts well to responsive needs.

Let us know how it goes.

On 7/30/2020 at 2:15 PM, derricksrandomviews said:

I just learned about your question. I just posted this for someone asking the same thing, and I am doing this on a site I have up. 

 You would treat the image like a map, with different spots linking to a page either on site or off site. You would do this with HTML code in a code block, The areas in the image can be any size and just about any shape. 

Directions and code are here: https://www.image-map.net/

You upload the image you want to use into custom files on your site, that is done by going to custom css and at the bottom of the panel is the manage custom files button. You select that and then you upload the image there. Once loaded you click the image button, the address is pasted at the top of the code panel. You copy it from there but don't save it on the panel. That address is then pasted into the load image from website field. I copied that address into wordpad along with the code I generated, because that is going to work as my backup. 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. 

Here is mine, you hover around the site plan until you see the cursor change to a hand then click it . 

https://www.dcmrblueridge.com/lotsforsale

I am using this on one of my sites, an image of a resort site plan with lots for sale, and viewers can click on each lot and it takes them to a sales page. It needs updating at the moment, but it works really well.  

My suggestion is to generate the code, paste it into wordpad and save it and also paste the code form the generator into your site. This is a hover effect so it will not work with mobile, the code is ignored, so keep that in mind. 

I am here if you have any questions or need help. 

dlp

Hi there, 

I found success with these steps and it was all very helpful. However, it seems as if the alignment to the photo and links is shifted on my page. Any advice for getting everything synced up? You can see the issue I'm having on the homepage of my site here: theenclavehabitat.org. All of the links are shifted slightly to the right and do not line up with the corresponding image. I'm not really sure how to fix it.

@EJC

Add the following to a code block.

<style>

  .image-overlay-wrap {
  
    display: inline-block; /* shrinks container to image size */
    fill: transparent;
    position: relative;
    
    }
    
  .image-overlay-wrap img { /* optional, for responsiveness */
  
    display: block;
    height: auto;
    max-width: 100%;
    
    }
    
  .image-overlay-wrap svg {
  
    left: 0;
    position: absolute;
    top: 0;
    
    }
    
  </style>

<div class="image-overlay-wrap">

  <img src="https://static1.squarespace.com/static/5f7f3af188c48c63e7fb34da/t/5fd05bcb12264b5dfdca37b3/1607490509527/logoEH+copy.png" />
  
  <svg viewBox="0 0 2000 1353">
  
    <a alt="About" target="_top" title="About" xlink:href="https://www.theenclavehabitat.org/about-5">
    
      <polygon points="514, 595, 289, 803, 413, 1013, 699, 988, 798, 808" />
      
      </a>
      
    <a alt="We the People" target="_top" title="We the People" xlink:href="https://www.theenclavehabitat.org/we-the-people">
    
      <polygon points="916, 337, 739, 545, 806, 761, 1081, 755, 1166, 561" />
      
      </a>
      
    <a alt="Join/Donate/Get Involved" target="_top" title="Join/Donate/Get Involved" xlink:href="https://www.theenclavehabitat.org/join">
    
      <polygon points="1351, 483, 1140, 733, 1222, 909, 1590, 881, 1596, 674" />
      
      </a>
      
    <a alt="Our Community" target="_top" title="Our Community" xlink:href="https://www.theenclavehabitat.org/ourcommunity">
    
      <polygon points="919, 817, 713, 1027, 756, 1185, 1140, 1193, 1183, 982" />
      
      </a>
      
    <a alt="Home" target="_top" title="Home" xlink:href="https://www.theenclavehabitat.org">
    
      <rect height="124" width="1342" x="349" y="1229" />
      
      </a>
      
    </svg>
    
  </div>

Let us know how it goes.

@creedon

hi

thank you very very much for your help. 

Your code is correct for my site (an example page is http:www.fabinlus.it/organigramma-1 ), but only if I visit the site on pc, because if I visit with my tablet or smartphone the coordinates are not correct...why??? :(:(:(:(:(

thank you for your reply

7 hours ago, FabiOnlus said:

http:www.fabinlus.it/organigramma-1

This URL doesn't work for me.

Sorry

www.Fabionlus.it/organigramma-1

i have found a mistake on the my code and now it seems correct....

I prefer your code instead of the code I was created with the site image-map.net ...

Now I have another question, please. If you see my image, I must to create more link.... how can I know the coordinate? Is there a simply greed for the coordinates? Now, at the moment I try for every image with the coordinates, until I find the correct...

@creedon

Another question 🤗

In your code, is it possible modify and insert an animation “on mouse over” instead to active a link with a click?

thanks

On 1/5/2021 at 2:41 PM, FabiOnlus said:

Now I have another question, please. If you see my image, I must to create more link.... how can I know the coordinate? Is there a simply greed for the coordinates? Now, at the moment I try for every image with the coordinates, until I find the correct...

Please see Learn How Area Coords Define Shapes & Sizes In HTML.

Now even though this article is about area maps which we don't want to use, the coordinate systems between area maps and SVG are very similar with a few minor differences when the viewbox is set properly for the SVG.

So if you want to use image-map.net to set up all your coordinates and post the results here. I can try and take a crack at translating the code from areamaps to svg.

On 1/5/2021 at 2:58 PM, FabiOnlus said:

In your code, is it possible modify and insert an animation “on mouse over” instead to active a link with a click?

Off the top of my head I don't know. What kind of animation? What do you want to see when you hover over one of the players?

When I over one the players, I would like to see another image of the same player more big, for example the player that pass the ball or run...I have already the image , but I don’t know the code for sostitute the link at another image with an animation... i hope was clear...

thanks a lot

On 10/23/2020 at 5:37 AM, creedon said:

 

Hi @creedon I am having the same issues with my site. The sections mapped are not aligning on desk top and on mobile there are no clicks at all? Are you able to help me?  Super new to custom CSS and this part has shown to be a nightmare!! Thank you so much!! https://www.bridgeadvisorypartners.com/services PW: bridge2021

@rbaxy

Replace your code (make a copy for safe keeping) with the following.

<style>

  .image-overlay-wrap {
  
    display: inline-block; /* shrinks container to image size */
    fill: transparent;
    position: relative;
    
    }
    
  .image-overlay-wrap img { /* optional, for responsiveness */
  
    display: block;
    height: auto;
    max-width: 100%;
    
    }
    
  .image-overlay-wrap svg {
  
    left: 0;
    position: absolute;
    top: 0;
    
    }
    
  </style>

<div class="image-overlay-wrap">

  <img src="https://static1.squarespace.com/static/5fc8e6b8834edf22fc55bfff/t/5ffd842e179f322ce8d6b977/1610449970222/Bridge+advisory+partners+Nav+chart-01.jpg" />
  
  <svg viewBox="0 0 4668 2388">
  
    <a alt="Data analytics" target="_top" title="Service 15" xlink:href="https://www.bridgeadvisorypartners.com/services/#anchor15">
    
      <rect height="226" width="1314" x="3198" y="2059" />
      
      </a>
      
    <a alt="sales and channel" target="_top" title="Service 14" xlink:href="https://www.bridgeadvisorypartners.com/services/#anchor14">
    
      <rect height="232" width="1316" x="3194" y="1773" />
      
      </a>
      
    <a alt="customer and market" target="_top" title="Service 13" xlink:href="https://www.bridgeadvisorypartners.com/services/#anchor13">
    
      <rect height="232" width="1314" x="3194" y="1491" />
      
      </a>
      
    <a alt="Business governance" target="_top" title="Service 12" xlink:href="https://www.bridgeadvisorypartners.com/services/#anchor12">
    
      <rect height="232" width="1314" x="3196" y="1209" />
      
      </a>
      
    <a alt="Security and controls" target="_top" title="Service 11" xlink:href="https://www.bridgeadvisorypartners.com/services/#anchor11">
    
      <rect height="230" width="1314" x="3198" y="923" />
      
      </a>
      
    <a alt="Data Governance" target="_top" title="Service 10" xlink:href="https://www.bridgeadvisorypartners.com/services/#anchor10">
    
      <rect height="228" width="1310" x="3198" y="643" />
      
      </a>
      
    <a alt="Technology Exploitation" target="_top" title="Service 9" xlink:href="https://www.bridgeadvisorypartners.com/services/#anchor9">
    
      <rect height="228" width="1314" x="3198" y="363" />
      
      </a>
      
    <a alt="Organisation Development" target="_top" title="Service 8" xlink:href="https://www.bridgeadvisorypartners.com/services/#anchor8">
    
      <rect height="232" width="1320" x="160" y="2057" />
      
      </a>
      
    <a alt="People Development" target="_top" title="" xlink:href="https://www.bridgeadvisorypartners.com/services/#anchor7">
    
      <rect height="230" width="1322" x="158" y="1773" />
      
      </a>
      
    <a alt="Turnaround" target="_top" title="Service 6" xlink:href="https://www.bridgeadvisorypartners.com/services/#anchor6">
    
      <rect height="238" width="1326" x="158" y="1489" />
      
      </a>
      
    <a alt="Business services" target="_top" title="Service 5" xlink:href="https://www.bridgeadvisorypartners.com/services/#anchor5">
    
      <rect height="230" width="1326" x="162" y="1209" />
      
      </a>
      
    <a alt="Process simplification" target="_top" title="Service 4" xlink:href="https://www.bridgeadvisorypartners.com/services/#anchor4">
    
      <rect height="230" width="1320" x="162" y="925" />
      
      </a>
      
    <a alt="Sustainability" target="_top" title="Service 3" xlink:href="https://www.bridgeadvisorypartners.com/services/#anchor3">
    
      <rect height="236" width="1326" x="160" y="643" />
      
      </a>
      
    <a alt="Restructuring and Integration" target="_top" title="Service 2" xlink:href="https://www.bridgeadvisorypartners.com/services/#anchor2">
    
      <rect height="234" width="1324" x="160" y="361" />
      
      </a>
      
    <a alt="Operating Model" target="_top" title="Service 1" xlink:href="https://www.bridgeadvisorypartners.com/services/#anchor1">
    
      <rect height="234" width="1320" x="162" y="83" />
      
      </a>
      
    </svg>
    
  </div>

You did a great job on defining the coords for the area map rects. That graphic looks fantastic by the way.

Let us know how it goes.

I'm also struggling to get my links to line up with my image. While trying to fix the problem I definitely messed up my code. What is my best way forward? 

<style>

  .image-overlay-wrap {
  
    display: inline-block; /* shrinks container to image size */
    fill: transparent;
    position: relative;
    
    }
    
  .image-overlay-wrap img { /* optional, for responsiveness */
  
    display: block;
    height: auto;
    max-width: 100%;
    
    }
    
  .image-overlay-wrap svg {
  
    left: 0;
    position: absolute;
    top: 0;
    
    }
    
  </style>

<div class="image-overlay-wrap">

  <img src="https://static1.squarespace.com/static/5553b4b0e4b0bc7084971a20/t/600cad4e5e998e7830fb8951/1611443535932/Screen+Shot+2021-01-23+at+3.52.27+PM.png" usemap="#image-map" />
  
  <svg viewBox="0 0 2088 1574">

<map name="image-map">
    <area target="_blank" alt="Compassion" title="Compassion" href="https://www.mybestself101.org/compassion" coords="855,847,1257,978,855,976,1259,853,2084,1436,2,4,2088,1574" shape="rect">
    <area target="_blank" alt="Exercise" title="Exercise" href="https://www.mybestself101.org/exercise" coords="1558,1004,1804,1081" shape="rect">
    <area target="_blank" alt="Flow" title="Flow" href="https://www.mybestself101.org/flow" coords="1473,812,1881,871" shape="rect">
    <area target="_blank" alt="Gratitude" title="Gratitude" href="https://www.mybestself101.org/gratitude" coords="275,1000,543,1081" shape="rect">
    <area target="_blank" alt="Mindfulness" title="Mindfulness" href="https://www.mybestself101.org/mindfulness" coords="253,812,556,875" shape="poly">
    <area target="_blank" alt="Optimism" title="Optimism" href="https://www.mybestself101.org/optimism" coords="279,1098,537,1176" shape="poly">
    <area target="_blank" alt="Personal" title="Personal" href="https://www.mybestself101.org/personal-growth-module" coords="1471,709,1891,782" shape="poly">
    <area target="_blank" alt="Purpose" title="Purpose" href="https://www.mybestself101.org/purpose" coords="294,607,530,694" shape="poly">
    <area target="_blank" alt="Savoring" title="Savoring" href="https://www.mybestself101.org/savoring" coords="279,899,541,982" shape="poly">
    <area target="_blank" alt="Self-compassion" title="Self-compassion" href="https://www.mybestself101.org/self-compassion" coords="1475,908,1900,984" shape="poly">
    <area target="_blank" alt="Supportive Relationships" title="Supportive Relationships" href="https://www.mybestself101.org/supportive-relationships" coords="846,596,1233,758" shape="poly">
    <area target="_blank" alt="The Basics" title="The Basics" href="https://www.mybestself101.org/21day-personal-growth-experiment" coords="262,1321,1817,1428" shape="poly">
    </map>

@jbekker

It looks like you've mixed area map code with svg. That won't work.

Folks in general if your are coming from an image map produced by a website like image-map.net then just post that code here. It is easier to go from that code to svg based code.

I think I can pull out the proper code from what you posted. Give me a bit.

@jbekker

It was a challenge and there were missing values.

The red shows the target link areas per the code I was able pull out of your code.

I think I have a pretty good handle on it and you need to check it over and make tweaks as needed.

Use the following HTML in your code block.

<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/5553b4b0e4b0bc7084971a20/t/600cad4e5e998e7830fb8951/1611443535932/Screen+Shot+2021-01-23+at+3.52.27+PM.png" />
  
  <svg viewBox="0 0 2090 1576">
  
    <a alt="Exercise" href="https://www.mybestself101.org/exercise" target="_blank" title="Exercise" xlink:href="https://www.mybestself101.org/exercise">
    
      <rect height="77" width="246" x="1558" y="1004" />
      
      </a>
      
    <a alt="Flow" href="https://www.mybestself101.org/flow" target="_blank" title="Flow" xlink:href="https://www.mybestself101.org/flow">
    
      <rect height="59" width="408" x="1473" y="812" />
      
      </a>
      
    <a alt="Gratitude" href="https://www.mybestself101.org/gratitude" target="_blank" title="Gratitude" xlink:href="https://www.mybestself101.org/gratitude">
    
      <rect height="81" width="268" x="275" y="1000" />
      
      </a>
      
    <a alt="Mindfulness" href="https://www.mybestself101.org/mindfulness" target="_blank" title="Mindfulness" xlink:href="https://www.mybestself101.org/mindfulness">
    
      <rect height="63" width="303" x="253" y="812" />
      
      </a>
      
    <a alt="Optimism" href="https://www.mybestself101.org/optimism" target="_blank" title="Optimism" xlink:href="https://www.mybestself101.org/optimism">
    
      <rect height="78" width="258" x="279" y="1098" />
      
      </a>
      
    <a alt="Personal" href="https://www.mybestself101.org/personal-growth-module" target="_blank" title="Personal" xlink:href="https://www.mybestself101.org/personal-growth-module">
    
      <rect height="73" width="420" x="1471" y="709" />
      
      </a>
      
    <a alt="Purpose" href="https://www.mybestself101.org/purpose" target="_blank" title="Purpose" xlink:href="https://www.mybestself101.org/purpose">
    
      <rect height="87" width="236" x="310" y="607" />
      
      </a>
      
    <a alt="Values" href="https://www.mybestself101.org/values" target="_blank" title="Values" xlink:href="https://www.mybestself101.org/values">
    
      <rect height="87" width="236" x="294" y="710" />
      
      </a>
      
    <a alt="Savoring" href="https://www.mybestself101.org/savoring" target="_blank" title="Savoring" xlink:href="https://www.mybestself101.org/savoring">
    
      <rect height="83" width="262" x="279" y="899" />
      
      </a>
      
    <a alt="Self-compassion" href="https://www.mybestself101.org/self-compassion" target="_blank" title="Self-compassion" xlink:href="https://www.mybestself101.org/self-compassion">
    
      <rect height="76" width="425" x="1475" y="908" />
      
      </a>
      
    <a alt="Supportive Relationships" href="https://www.mybestself101.org/supportive-relationships" target="_blank" title="Supportive Relationships" xlink:href="https://www.mybestself101.org/supportive-relationships">
    
      <rect height="162" width="387" x="846" y="596" />
      
      </a>
      
    <a alt="The Basics" href="https://www.mybestself101.org/21day-personal-growth-experiment" target="_blank" title="The Basics" xlink:href="https://www.mybestself101.org/21day-personal-growth-experiment">
    
      <rect height="107" width="1555" x="262" y="1321" />
      
      </a>
      
    <a alt="Iterconnectedness" href="https://www.mybestself101.org/interconnectedness" target="_blank" title="Iterconnectedness" xlink:href="https://www.mybestself101.org/interconnectedness">
    
      <rect height="87" width="482" x="805" y="766" />
      
      </a>
      
    <a alt="Compassion" href="https://www.mybestself101.org/compassion" target="_blank" title="Compassion" xlink:href="https://www.mybestself101.org/compassion">
    
      <rect height="71" width="329" x="875" y="876" />
      
      </a>
      
    <a alt="Community" href="https://www.mybestself101.org/community" target="_blank" title="Community" xlink:href="https://www.mybestself101.org/community">
    
      <rect height="67" width="299" x="892" y="974" />
      
      </a>
      
    <a alt="Contribution" href="https://www.mybestself101.org/contribution" target="_blank" title="Contribution" xlink:href="https://www.mybestself101.org/contribution">
    
      <rect height="65" width="330" x="877" y="1074" />
      
      </a>
      
    <a alt="Engaged Living" href="https://www.mybestself101.org/engaged-living" target="_blank" title="Engaged Living" xlink:href="https://www.mybestself101.org/engaged-living">
    
      <rect height="75" width="384" x="1488" y="613" />
      
      </a>
      
    <a alt="Meditation" href="https://www.mybestself101.org/meditation" target="_blank" title="Meditation" xlink:href="https://www.mybestself101.org/meditation">
    
      <rect height="74" width="270" x="1543" y="1100" />
      
      </a>
      
    </svg>
    
  </div>

Let us know how it goes.

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

@creedon

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>