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

Adding multiple links on an image

Recommended Posts

I'd like to have the image below contain multiple links, each of which would take you to different pages depending where you click. Is there an easy way to do this in Squarespace? Perhaps with a plugin? Or would it require adjusting the code? 


I saw a similar question in the forum, but that was for a navigation bar made up of box-shaped images lined up in a row. This is more complicated because the links would be in areas of the image that don't line up as a grid (one on each animal and plant), so I can't just cut the image up into uniform boxes.

Any advice would be appreciated. Thank you!

Link to post
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Yes you can do that. 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. 

You will need the internal website  url address of the image. That address usually  will be something like:

https://static1,squarespace.com...........followed by a very long number string .jpg

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

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

I apologize, its been awhile since I have done this, and I left out a very important step. You upload the image 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 . 


Edited by derricksrandomviews
Link to post
  • 2 weeks later...

I have a similar question...

I am trying to convert an interactive google slide show to a full on website. I have both internal and external links in the slideshow and would like to be able to have everything run like an app or website. Any suggestions on how to do this? I'm happy to provide additional details if necessary. TYIA!

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