Jump to content

Have a list of links appear on top of an image on click

Recommended Posts

I have a client who is looking to add a feature to his site where the stacked vertically oriented images on the right side of the screen, when clicked or tapped on, will convert to a short list of clickable links for the type of establishments the picture references. I am not sure the best way to accomplish this. Or even the best method to attempt it in squarespace.

It would be best if the image changed back if anywhere else was clicked, but is not nearly as important as an easy block of code I can have ready for him to add or edit as he needs to to turn an image into a list of links on being clicked. I had a code like this for a large popup image that could be clicked to relocate it behind the page, but it would not reset, and I am not sure it would work with multiple images. It would just cover the area until it was clicked and then disappear.

If anyone looks in here for features, a feature block that incorporated this mechanic would be nice. Two blocks that would swap between each other on trigger. You could choose which blocks and triggers, 2 images, an image and a list of links, an image and a paragraph, an image and a couple buttons, choose your own adventure style. It's been a while since I've delved into whats new here and I am currently knee deep in a flu, so I may just have lost access to the part of my brain that knows how to do this with the tools available. If my flu clears and I remember the way I will be back to apologize for wasting yalls time.

Link to comment
  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

I'm not looking for anything specific like animation or anything, just the function of clicking on the image to have to change into the text block or whatever, allow you to click the links in the text block, etc. If its possible to have a link or button that changes back to the image, great. If not? No biggie, the function being one-way is not a big negative to have to deal with.HAmockup1.jpg.56a64510e1fc15452644378ab7a2ac89.jpgHAmockup2.jpg.3b1716b6ae5c46c80cc509c6ebd0bfc3.jpg

Edited by HalGameGuru
Link to comment

I mean tabs are an option, I know there are java based solutions, but I was really hopeful Squarespace had a solution that would not require custom code being added so I could suggest it to my clients without them having to contact me to make changes or additions. I don't like providing solutions they cannot make use of themselves with relative ease.

An interesting option for Squarespace with the responsive templates would be to have it where it could identify if it needs to recognize hover from a mouse or tapping from a mobile device. And respond accordingly. 


Function like this: https://codepen.io/HalGameGuru/pen/NWJEJrV
But without JS, or ideally, a squarespace block, maybe called "Convertible" that lets you sandwich two pre-existing types of blocks together and switch between them

Link to comment

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.