Interactive Image Map

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. 

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)

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. 

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.

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

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.

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.

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? 

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.

Thank you for the help @creedon. I was able to find another plugin that is functional and much more easier to use on squarespace. 

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.

For anyone looking for an all in one solution to this problem.  This site creates the image map and converts it into a responsive SVG for your site in one easy step!  

A HUGE shoutout and THANK YOU to @Ziggy for this solution!  

I used image-map.net to create my code for my image map. All the links are there, the image is uploaded to my Squarespace site with the same name yet the image is not showing. Can anyone help me determine why my image is not showing up. 

Well I got the photo to show up but no links are working. Nothing is showing up even though I have all the links with the coords? 

On 10/30/2023 at 3:27 AM, creationscape said:

 

For anyone looking for an all in one solution to this problem.  This site creates the image map and converts it into a responsive SVG for your site in one easy step!  

A HUGE shoutout and THANK YOU to @Ziggy for this solution!  

Hi @creationscape! What site/tool did you use? I don't see a link in your post and am curious about this for a client project. Thanks in advance!

On 10/26/2023 at 5:01 PM, pautatazhcc said:

Thank you for the help @creedon. I was able to find another plugin that is functional and much more easier to use on squarespace. 

Hello, may I know the the plugin you used that was easier to integrate with squarespace?