Click able parts of an image

Hi, I am new to square space and have created my first square space website.. now the site is launched i would like to go back over and customise / develop the site for better user experiences. 

One of the snags on my list is to make the following image have clickable links, firstly is this possible? I would like the ability for the user to be able to click on one of our products which leads them to our main product page on our parent site. At the moment the image is just a click through but would be ideal if they click on a certain product it will go to the products individual page rather then our product overview page.

the URL to our site is www.lightgraphixmarine.co.uk 

thank you in advance

Trev

Does anyone know how or have help wit this please?

You can Google with keyword: Image Map

6 hours ago, tuanphan said:

You can Google with keyword: Image Map

@tuanphan ok thanks, i will give it a search .. thanks for the keyword

On 4/24/2024 at 10:08 AM, tuanphan said:

You can Google with keyword: Image Map

Hi tuanphan

thanks for the advice, but i am having abit of a issue with trying to work out the image mapping, do you know if there are any tutorials / video tutorials that can help with it please.. i am new to the whole squarespace / html game so trying to get my head around it. 

Thank you 

20 hours ago, LightGraphix said:

Hi tuanphan

thanks for the advice, but i am having abit of a issue with trying to work out the image mapping, do you know if there are any tutorials / video tutorials that can help with it please.. i am new to the whole squarespace / html game so trying to get my head around it. 

Thank you 

I haven't used it yet, I jut search GG, for example this tool: 

https://www.image-map.net/

when you setting >> Show me the code > Copy code > Edit page where you want to add it in Squarespace > Add a Block > Choose "Code" from the list >> Paste the code.

Hi tuanphan

Thanks for the help, i will give it a try. 

I will attempt to do it on a hidden page before doing the live one. Thanks for the help.

Hi tuanphan


I had used the website you had sent me but it seems that the code don't seem to work.. I had made a new section, went to add code tab, copied n pasted the code in. The image appeared but the area's were not clickable, do you have any solution please? 


<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://images.squarespace-cdn.com/content/v1/6602fd1083db703b162c47a8/622b4b1c-8ecc-45c6-aa70-5afa9bcbfc5b/Applications.png?format=2500w" usemap="#image-map">

<map name="image-map">
    <area target="" alt="LD1094" title="LD1094" href="www.lightgraphix.co.uk" coords="240,205,43" shape="circle">
    <area target="" alt="LD154" title="LD154" href="https://www.lightgraphix.co.uk/prod?product=LD155" coords="621,827,52" shape="circle">
</map>

17 hours ago, LightGraphix said:

Hi tuanphan


I had used the website you had sent me but it seems that the code don't seem to work.. I had made a new section, went to add code tab, copied n pasted the code in. The image appeared but the area's were not clickable, do you have any solution please? 


<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://images.squarespace-cdn.com/content/v1/6602fd1083db703b162c47a8/622b4b1c-8ecc-45c6-aa70-5afa9bcbfc5b/Applications.png?format=2500w" usemap="#image-map">

<map name="image-map">
    <area target="" alt="LD1094" title="LD1094" href="www.lightgraphix.co.uk" coords="240,205,43" shape="circle">
    <area target="" alt="LD154" title="LD154" href="https://www.lightgraphix.co.uk/prod?product=LD155" coords="621,827,52" shape="circle">
</map>

Can you share link to page where you added code? I can check easier

Hi tuanphan

I have created a duplicate of my site for testing and i have placed the code in on this page .. it is just below the header video. 

https://antelope-lobster-44t9.squarespace.com/
P/W: test123

thank you for your help.

Hi tuanphan

Did you manage to look at the page / work out what is going wrong with the clickable image please? ~

thank you

I see it already works here, but it seems the location is not very accurate

If you click LD44G, you will see it

Hi tuanphan

Thanks that is so odd cos the 44G was not made to be clickable.. I had only done it on the two top products, i will try re-creating hte image with all products having links would that make it easier to try break ti down?