Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Add Multiple Links on Top of Image


Question

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

Proper Button Alignment.JPG

Button Spacing Fix.JPG

Link to post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

8 answers to this question

Recommended Posts

  • 0

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.

New Straight.JPG

Link to post
  • 0

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

Edited by derricksrandomviews
Link to post
  • 0

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?

Link to post
  • 0

@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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

@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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...