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

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

Proper Button Alignment.JPG

Button Spacing Fix.JPG

Share this post

Link to post

3 answers to this question

Recommended Posts

  • 0

Can you share link to your site + image url?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post

Link to post
  • 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

Share this post

Link to post
  • 0
Posted (edited)

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 . 


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. 


Edited by derricksrandomviews

Share this post

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