Adding multiple links on an image

I'd like to have the image below contain multiple links, each of which would take you to different pages depending where you click. Is there an easy way to do this in Squarespace? Perhaps with a plugin? Or would it require adjusting the code? 

I saw a similar question in the forum, but that was for a navigation bar made up of box-shaped images lined up in a row. This is more complicated because the links would be in areas of the image that don't line up as a grid (one on each animal and plant), so I can't just cut the image up into uniform boxes.

Any advice would be appreciated. Thank you!

Yes you can do that. You would treat the image like a map, with different spots linking to a page either on site or off site. You would do this with HTML code in a code block, The areas in the image can be any size and just about any shape. 

You will need the internal website  url address of the image. That address usually  will be something like:

https://static1,squarespace.com...........followed by a very long number string .jpg

Directions and code are here: https://www.image-map.net/

I am using this on one of my sites, an image of a resort site plan with lots for sale, and viewers can click on each lot and it takes them to a sales page. It needs updating at the moment, but it works really well.  

My suggestion is to generate the code, paste it into wordpad and save it and also paste the code form the generator into your site. This is a hover effect so it will not work with mobile, the code is ignored, so keep that in mind. 

I am here if you have any questions or need help. 

dlp

That's great, thank you @derricksrandomviews!

So once I get the code, how do I put that on my page instead of the image? I tried inserting the code with a code block but wasn't successful.

I apologize, its been awhile since I have done this, and I left out a very important step. You upload the image into custom files on your site, that is done by going to custom css and at the bottom of the panel is the manage custom files button. You select that and then you upload the image there. Once loaded you click the image button, the address is pasted at the top of the code panel. You copy it from there but don't save it on the panel. That address is then pasted into the load image from website field. I copied that address into wordpad along with the code I generated, because that is going to work as my backup. Once you have the code, create your code block above the image, once you see that it is working you will know because there will be two images one one over the other,  delete the original image block leaving the code block. 

Here is mine, you hover around the site plan until you see the cursor change to a hand then click it . 

https://www.dcmrblueridge.com/lotsforsale

That did it! Thanks very much @derricksrandomviews! 

I have a similar question...

I am trying to convert an interactive google slide show to a full on website. I have both internal and external links in the slideshow and would like to be able to have everything run like an app or website. Any suggestions on how to do this? I'm happy to provide additional details if necessary. TYIA!

On 7/30/2020 at 1:56 PM, derricksrandomviews said:

Yes you can do that. You would treat the image like a map, with different spots linking to a page either on site or off site. You would do this with HTML code in a code block, The areas in the image can be any size and just about any shape. 

You will need the internal website  url address of the image. That address usually  will be something like:

https://static1,squarespace.com...........followed by a very long number string .jpg

Directions and code are here: https://www.image-map.net/

I am using this on one of my sites, an image of a resort site plan with lots for sale, and viewers can click on each lot and it takes them to a sales page. It needs updating at the moment, but it works really well.  

My suggestion is to generate the code, paste it into wordpad and save it and also paste the code form the generator into your site. This is a hover effect so it will not work with mobile, the code is ignored, so keep that in mind. 

I am here if you have any questions or need help. 

dlp

Hi there - this is exactly what I need.  But when I finish the cursor doesn't get hot when I hover on the links I set up.  I'm not a tech person and don't know what the target field is so perhaps that's the issue?  Everything works except the spots aren't hot.  Thanks!

Oh I figured out the target thing and it shouldn't affect the cursor/spots not being hot.  The cursor *does* change when I'm on the map builder site so I know I'm setting it up right.  but not when I add the code block.  Here's my page :(

https://hudsonmx.com/map-test#

thanks for your help! 

@derricksrandomviews Hi all. Thanks for the reference website of image-map.org. This has been a huge help. I am running into some problems still. I dont know if anyone is able to help. Basically what Ive done is the following:

1. Uploaded Image into Custom CSS

2.Clicked on Image to obtain address of image.

3.Inserted copied address here in bold:

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://static1.squarespace.com/static/5f3ed139a6a2cd4c99a9f694/t/5fc963d023785276782152f2/1607033811893/World+Map.jpg" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="InsightSeminars" title="InsightSeminars" href="https://www.insightseminars.org/" coords="1023,1206,121" shape="circle">
    <area target="_blank" alt="InsightSeminars" title="InsightSeminars" href="https://www.insightseminars.org/" coords="1734,1025,121" shape="circle">
</map>

4. Created new code link on blank page.

5.Copied and pasted above code into field on blank page

6.The image populates, but nothing is clickable. 

What am I missing? I know im doing something wrong or it would work. Any feedback would be amazing. 

Ingratitude. 

I have one map on a site, but the changes take place so rapidly that I have not kept up with it. Some of the lots on the map have for sale on hover and are clickable some are not. 

https://www.dcmrblueridge.com/lotsforsale  I am going to post my code for you so you might be able to compare. I put this in a code block on the page and set the block for html. You cannot use an image block it has to be a code block with the url of the image you uploaded to  the css file. Plus when you make the map on the map site you have to generate the vectors by making a circle, square or whatever you want. You will see the coordinates in this code. It looks like you have done that though. Check this code over carefully and see if you are missing something. 

<p><p><!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://static1.squarespace.com/static/580beb7b725e2593f76ca614/t/5d988da60583e246eea6838d/1570278823091/site.jpg" usemap="#image-map">  
  <map name="image-map">  
    <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-25/" coords="150,460,140,438,205,427,219,455" shape="poly">
    <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-41/" coords="348,564,334,555,366,507,393,512" shape="poly">
    <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-44/" coords="450,572,437,566,464,516,494,519" shape="poly">
    <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-46/" coords="519,579,504,572,537,521,560,527" shape="poly">
    <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-50/" coords="374,486,389,482,366,426,353,430" shape="poly">
    <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-56-and-lot-57/" coords="578,503,608,511,580,442,560,442" shape="poly">
    <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-56-and-lot-57/" coords="609,442,644,518,611,507,583,442" shape="poly">
    <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-64/" coords="476,423,501,427,472,363,444,363" shape="poly">
      <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-53/" coords="478,497,502,499,478,431,445,431" shape="poly">
      <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-43/" coords="403,567,419,570,457,517,427,512" shape="poly">
    <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-31/" coords="271,629,262,612,315,596,329,619" shape="poly">
    <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-64/" coords="508,427,523,422,502,364,484,363" shape="poly">
    <area target="_blank" alt="FOR SALE" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-4/" coords="711,519,695,493,735,445,757,463" shape="poly">
     <area target="_blank" alt="FOR SALE" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-8/" coords="701,340,677,318,645,364,665,374" shape="poly">
     <area target="" alt="FOR SALE" title="For Sale" href="https://dcmrlot3.squarespace.com/lotsforsale#/lot-32/" coords="337,630,355,652,280,658,280,640" shape="poly">
     <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-1/" coords="710,600,729,612,785,559,743,549" shape="poly">
    <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-66/" coords="542,433,564,419,538,367,513,367" shape="poly">
     <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-55/" coords="543,503,522,435,541,435,572,507" shape="poly">
    <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-45/" coords="468,571,490,580,526,519,497,516" shape="poly">
    <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-49/" coords="317,427,339,415,366,487,333,483" shape="poly">
      <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-52/" coords="414,430,448,427,464,490,433,490" shape="poly">
    <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lot-42" coords="397,573,355,567,397,508,435,512,409,544" shape="poly">
     <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lotsforsale#/lot-14/" coords="417,278,453,278,479,353,448,347,443,333" shape="poly">
      <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lot-2" coords="677,597,699,611,743,550,714,542" shape="poly">
    <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lot-22" coords="81,346,93,378,173,371,151,338" shape="poly">
    <area target="_blank" alt="For Sale" title="For Sale" href="https://www.dcmrblueridge.com/lot-16" coords="353,271,376,274,379,341,409,344" shape="poly">

</map></p></p>

On 7/30/2020 at 1:56 PM, derricksrandomviews said:

Yes you can do that. You would treat the image like a map, with different spots linking to a page either on site or off site. You would do this with HTML code in a code block, The areas in the image can be any size and just about any shape. 

You will need the internal website  url address of the image. That address usually  will be something like:

https://static1,squarespace.com...........followed by a very long number string .jpg

Directions and code are here: https://www.image-map.net/

I am using this on one of my sites, an image of a resort site plan with lots for sale, and viewers can click on each lot and it takes them to a sales page. It needs updating at the moment, but it works really well.  

My suggestion is to generate the code, paste it into wordpad and save it and also paste the code form the generator into your site. This is a hover effect so it will not work with mobile, the code is ignored, so keep that in mind. 

I am here if you have any questions or need help. 

dlp

 

@derricksrandomviews Thank you VERY much for this suggestion. I'm not OP but it is 80% of what I've been looking for. 
I have two quick questions if you don't mind: 
1. How does the "Target" field work (options '_blank, _parent, _self, _top'. I'm learning fast but still new to all of this. 
2. Do you know if it's possible to make the images appear on hover/mouseover or click, rather than take you to a new page? I'm not asking for the code or anything, just to maybe point me in the right direction. 

It may be possible to show data on hover but I doubt it, not without code I don't have.. This map generator is designed to link on click not just react on hover. As far as what the click does with the link or target as it is called, these are the simplest definitions. 

target="_blank"

Opens a new window and show the related data.

target="_self"

Opens the window in the same frame, it means existing window itself.

target="_top"

Opens the linked document in the full body of the window.

target="_parent"

Opens data in the size of parent window.

On 12/13/2020 at 5:38 AM, derricksrandomviews said:

It may be possible to show data on hover but I doubt it, not without code I don't have. . This map generator is designed to link on  click not just react on hover. As far as what the click does with the link or target as it is called. This are the simplest definitions. 

target="_blank"

Opens a new window and show the related data.

target="_self"

Opens the window in the same frame, it means existing window itself.

target="_top"

Opens the linked document in the full body of the window.

target="_parent"

Opens data in the size of parent window.

 

@derricksrandomviews That is a HUGE help, thank you very much. 

@derricksrandomviewshello! your instructions on how to make an image map are straight forward, but I've tried this method a few times, and my images continues to appear broken.

Do you have any ideas as to why this is?

I've uploaded it in the CSS code (didn't save it there), placed the code for the image location into the html from the image map generator that you shared, and nothing. I've even checked the code that you shared and my code is very much the same.

Here is my code, with the updated img source. I've included a few screenshots as well to help explain what I'm doing.

Image map generated code:

<!-- Image Map Generated by http://www.image-map.net/ -->

<img src="https://images.squarespace-cdn.com/content/v1/5bc4c807809d8e7efb41be79/1625158339157-OBJ5TD7XX7BIARJ6UHSI/080ca9253bc4e73ebe38e3584ae35f0d.jpg" usemap="#image-map">

<map name="image-map">

    <area target="_blank" alt="Second Chance" title="Second Chance" href="https://antelope-sepia-g3mg.squarespace.com/config/pages/5bc4e66ce4966bc550299451" coords="53,328,15,310" shape="rect">

    <area target="_blank" alt="U.S. Green Building Council" title="U.S. Green Building Council" href="https://antelope-sepia-g3mg.squarespace.com/config/pages/5bc4e5dd104c7b0a877344ec" coords="70,85,110,103" shape="rect">

    <area target="_blank" alt="Websites" title="Websites" href="https://antelope-sepia-g3mg.squarespace.com/config/pages" coords="" shape="rect">

</map>

Image source URL:

https://images.squarespace-cdn.com/content/v1/5bc4c807809d8e7efb41be79/1625158339157-OBJ5TD7XX7BIARJ6UHSI/080ca9253bc4e73ebe38e3584ae35f0d.jpg

In the attached images, I share my CSS panel, and the test page I'm trying this out on in editing mode. I'm trying this on my website (version 7.0), but want to implement it on a client's site (version 7.1). On both versions, I couldn't get it to display properly.

Would appreciate any insight as to what I may be doing wrong. Thanks!

The map gen html code won't work in custom css. It has to be placed in a code block on the page where you want to use it.  The image itself is in custom files which is accessed thru custom css and the address for that image is added to the code generator.   

@derricksrandomviews yes, I've added the map generated html to a code block on my page. I uploaded the image into the CSS panel, then updated the img source html in the map gen html.

I'm just confused as to what I might be missing and why this isn't working for me. Any other thoughts? I've attached an image of my code block here.

@MG22 The only differences between ours that I'm noticing is a few <p> at the beginning and ends of your codes as well as more blank lines.

I copied the code from https://www.image-map.net/ into a Google Doc and added my image source to the doc. Then I copied and pasted that in Code Block in my site. It finally works.

The only other change I made is doing more Poly links rather than all rectangles. I doubt that could be the issues but thought I'd otss that in there.