Clickable Images

Hello, I would like to add an image on the landing page of the website I am building. The image represents a triangle (see image), and each corner represent a section o the menu. I would like to make the image interactive, so if someone clicks o it, it will lead to the related section. I am a designer and I don't code, so I guess I will need someone who codes to help me cusomizing it?

Treat it like a map image and use the three points, just like you said. You would need to add a code block to your site where the image is  and  html code generated by this site:

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

On 6/24/2020 at 11:00 PM, derricksrandomviews said:

Treat it like a map image and use the three points, just like you said. You would need to add a code block to your site where the image is  and and html code generated by this site:

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

Thanks so much! I will try!

If you need any additional  help just ask me.. 

On 6/27/2020 at 10:38 PM, derricksrandomviews said:

If you need any additional  help just ask me.. 

Hello! I am also trying to action this on squarespace 7.1 site. So I understand correctly, I upload a jpeg to image-map.net insert the link (which is an anchor to a section on the 'service' page) for example website.com/services/#anchor1 (there will be 15 anchors in total that I want the user to click on, on the image to take them to different parts of the page. Next step, I add the code into a code block above the image (same image that I have uploaded on to image-map). New to this so your help would be really appreciated!! As I have actioned the above and what I'm doing isn't working. Thank you so much!!

The image has to be uploaded as a file on your site first and that link is used on the map creator. You create the map post the html in a code block on the page you want and if the original image is still there in a block remove that.  The best way is to use a link editor

Open a link editor

highlight text anywhere,click the link icon.

Upload a new file

To upload a new file:

1. In the link editor, click  in the URL field.
2. Click the File tab.
3. Click Upload File to choose a file from your computer, or drag a file into the Upload File area.
4. After uploading, click the file in the list. A checkmark appears beside the chosen file.
5. Click Save, then click Apply or Save.
6. Click the link to get the address of the file. Copy it then remove the link. The address still functions. 

15 minutes ago, derricksrandomviews said:

The image has to be uploaded as a file on your site first and that link is used on the map creator. You create the map post the html in a code block on the page you want and if the original image is still there in a block remove that.  The best way is to use a link editor

Open a link editor

highlight text anywhere,click the link icon.

Upload a new file

To upload a new file:

1. In the link editor, click  in the URL field.
2. Click the File tab.
3. Click Upload File to choose a file from your computer, or drag a file into the Upload File area.
4. After uploading, click the file in the list. A checkmark appears beside the chosen file.
5. Click Save, then click Apply or Save.
6. Click the link to get the address of the file. Copy it then remove the link. The address still functions. 

Thank you for your quick reply super helpful!! 🙂  Okey, so I've done it and it's working on the desktop - though it is smaller than the original image and it's not centred when the image uploaded was? But the main issues is on mobile, the image isn't linked at all? Any idea why this is happening? 

On 1/12/2021 at 3:59 AM, rbaxy said:

Thank you for your quick reply super helpful!! 🙂  Okey, so I've done it and it's working on the desktop - though it is smaller than the original image and it's not centred when the image uploaded was? But the main issues is on mobile, the image isn't linked at all? Any idea why this is happening? 

Do you still need help on this?

I have this same question, but I can start a new thread if needed. I have created the code, but I'm unsure where to put it. 

We are using a "Cover Page" page, but it seems through multiple re-readings that derricksrandomviews' explanation is intended for one of the regular block edit pages. IS this the case? 

If it is not the case, please advise where to put the code on the cover page.

No new thread is needed and to answer your question. 

Yes, it is the case, 7.0 cover pages are not built like a 7.0 template, they are unique to themselves. .  HTML will not work on cover pages with 7.0, there is no option for a code or markdown block. 

One option is to build your own cover page statrting with a blank page and using code to remove the header and the footer, then you can add your own image and map it out. 

On 1/11/2021 at 3:59 PM, rbaxy said:

Thank you for your quick reply super helpful!! 🙂  Okey, so I've done it and it's working on the desktop - though it is smaller than the original image and it's not centred when the image uploaded was? But the main issues is on mobile, the image isn't linked at all? Any idea why this is happening? 

No, but my map would not work on mobile also. I think it has something to do with the fact that hover doesn't work on mobile either. I will research this and see if there is any way to get it to function. 

update: For the  number of clickable points you want this may be the better way to go:

https://researchasahobby.com/responsive-image-clickable-areas-free/

18 minutes ago, derricksrandomviews said:

 

No new thread is needed and to answer your question. 

Yes, it is the case, 7.0 cover pages are not built like a 7.0 template, they are unique to themselves. .  HTML will not work on cover pages with 7.0, there is no option for a code or markdown block. 

One option is to build your own cover page statrting with a blank page and using code to remove the header and the footer, then you can add your own image and map it out. 

Thanks. How might one go about removing headers & footers, and in our case, menu options? Is there a specific place to edit said code? 

Test link below. 

https://www.gcfcentralspokane.org/lading-page-test

This guide should help you:

https://insidethesquare.co/squarespace-tutorials/removing-header-footer-using-css

On 2/10/2021 at 2:07 AM, BAB said:

Thanks. How might one go about removing headers & footers, and in our case, menu options? Is there a specific place to edit said code? 

Test link below. 

https://www.gcfcentralspokane.org/lading-page-test

Have you solved this yet?

Hello Everyone, Could you please help me with my query in add a custom image -map code to the webpage? I am trying to insert the code but the image is coming stretched which is messing up the coordinates on the image. 

I tried using the image-map.net tool, and I get the image to imbed fine onto my webpage using the HTML code, but I cannot get it to respond to any clicks where I placed the links. Any ideas on what I could be doing wrong here? 

On 8/7/2021 at 3:08 AM, Medic said:

I tried using the image-map.net tool, and I get the image to imbed fine onto my webpage using the HTML code, but I cannot get it to respond to any clicks where I placed the links. Any ideas on what I could be doing wrong here? 

Hi. Can you share link to page where you inserted image? We can take a look

I am having the same problem as the above user (Medic) with the following: https://greyhound-kangaroo-a5xw.squarespace.com/practice-based-1

I have inserted a link in the image-map site image, generated the code, added the code to my Squarespace page. I can then see the image but it is not clickable. 

On 9/8/2021 at 10:58 PM, TheVine said:

I am having the same problem as the above user (Medic) with the following: https://greyhound-kangaroo-a5xw.squarespace.com/practice-based-1

I have inserted a link in the image-map site image, generated the code, added the code to my Squarespace page. I can then see the image but it is not clickable. 

Hi,

The url doesn't exist.

Has anyone tried applied an image map in a Banner on a Bedford template? I'm seeing people just input these in using the embed code block but I don't know if I can or how to do that for a Banner image. Please help.

I'm trying to achieve the same thing on mobile view only. I have setup to hide certain images on mobile and certain images on desktop. Should I first cancel out the hide/view code and update the images using the code on mobile versions and then reactivate my hide/view code in CSS?

Here is my image map for the first image in the view on mobile:

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="section 2 mobile.png" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="Get Truth Talks Card Deck" title="Get Truth Talks Card Deck" href="https://www.paypal.com/instantcommerce/checkout/XEJC62YKRBXMY" coords="889,1387,162,1137" shape="rect">
</map>

For access my page is https://truth-talks.squarespace.com/ and its password protected 

PW: truthtalks

On 4/8/2024 at 7:57 PM, musbkc said:

I'm trying to achieve the same thing on mobile view only. I have setup to hide certain images on mobile and certain images on desktop. Should I first cancel out the hide/view code and update the images using the code on mobile versions and then reactivate my hide/view code in CSS?

Here is my image map for the first image in the view on mobile:

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="section 2 mobile.png" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="Get Truth Talks Card Deck" title="Get Truth Talks Card Deck" href="https://www.paypal.com/instantcommerce/checkout/XEJC62YKRBXMY" coords="889,1387,162,1137" shape="rect">
</map>

For access my page is https://truth-talks.squarespace.com/ and its password protected 

PW: truthtalks

 

Hi,

What is your problem now? You can't edit image with code or?

Or you need to show 1 image on desktop, show another on mobile? If yes, can you share link to page? I don't see these image maps on homepage