Ginger_Meadow_08 Posted November 5, 2021 Share Posted November 5, 2021 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. EarvinChong 1 Link to comment
Agha_Waqas Posted November 5, 2021 Share Posted November 5, 2021 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
paul2009 Posted November 5, 2021 Share Posted November 5, 2021 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. sayreambrosio 1 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
creedon Posted November 6, 2021 Share Posted November 6, 2021 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
Beyondspace Posted November 6, 2021 Share Posted November 6, 2021 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 format) 💫 Animated Buttons (Referral URL) 🥳 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
pautatazhcc Posted October 24 Share Posted October 24 @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
creedon Posted October 24 Share Posted October 24 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
creedon Posted October 26 Share Posted October 26 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
pautatazhcc Posted October 26 Share Posted October 26 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
creedon Posted October 26 Share Posted October 26 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
pautatazhcc Posted October 27 Share Posted October 27 Thank you for the help @creedon. I was able to find another plugin that is functional and much more easier to use on squarespace. creedon 1 Link to comment
creedon Posted October 27 Share Posted October 27 (edited) 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 October 27 by creedon sayreambrosio 1 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
creationscape Posted October 30 Share Posted October 30 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! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment