Jump to content

Recommended Posts

38 minutes ago, Ginger_Meadow_08 said:

Is there a way to have an image interactive where you can click on multiple parts of the image like a map? I have an image that has multiple spots we would like to have linked to a separate page. 

Hi, yes we can do that, Will you inbox me the image so i will see. though we can create that functionality with Custom Code (hmtl, css and js)

Link to comment
2 hours ago, Ginger_Meadow_08 said:

Is there a way to have an image interactive where you can click on multiple parts of the image like a map?

Yes, you can create clickable areas on an image by creating an HTML image map using code. You'll find a number of free 'image map generators' online to help you. 

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

I recommend the svg responsive image map technique. It requires only HTML and CSS. You can start with an image map as paul2009 suggests and then convert it to use the svg technique.

 

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
5 hours ago, Ginger_Meadow_08 said:

Is there a way to have an image interactive where you can click on multiple parts of the image like a map? I have an image that has multiple spots we would like to have linked to a separate page. 

There is a paid plugin called image map pro on codecanyon

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 1 year later...

@Beyondspace in your experience, have you been able to implement image map pro successfully onto a squarespace website? Because I created an interactive image using image map pro, however, I'm having trouble successfully embedding it onto my squarespace site. The image shows up, however, it is not interactive at all. The mouseover and clickable features do not work. 

 

Any insight you could provide would be greatly appreciated! 

Link to comment
1 hour ago, pautatazhcc said:

The image shows up, however, it is not interactive at all. The mouseover and clickable features do not work.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
45 minutes ago, pautatazhcc said:

The following code was provided by Image Map Pro using their "Editor" tool.

I'm not familiar with that tool but from the code on the site I don't see any links in the code. Just the code defining where the shapes are. It feels like into is missing. Perhaps not entered into the tool? Again, I don't know the tool so I can't say for sure.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Yes, I can revisit the links, I may have forgotten to add that in the "editor" tool, so thank you for pointing that out. However, the mouse hover over effect to show certain text when hovering over a portion of the image should be working. In terms of that, do you see any issues in the code? Also in squarespace, when should the code block be used as opposed to the code injection? 

Link to comment
10 minutes ago, pautatazhcc said:

However, the mouse hover over effect to show certain text when hovering over a portion of the image should be working. In terms of that, do you see any issues in the code?

I don't know the code so I can't really comment on this. I can say that I'm seeing tons of errors in the console that seem to be related to this code. Is it possible that it is not compatible with Squarespace?

Quote

Also in squarespace, when should the code block be used as opposed to the code injection?

This is is an example of code that normally goes in a code block.

There is no clear right answer to your question. In part it depends on the code. In some cases it is a matter of how you like to organize your code.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
8 hours ago, pautatazhcc said:

I was able to find another plugin that is functional and much more easier to use on squarespace.

Please let us know what you found so that others might benefit.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 3 months later...

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.