Jump to content

Multiple links in one image?

Recommended Posts

Site URL: http://www.storiesthroughtori.com

Hi there. I am needing to insert multiple areas within a singular image of clickable links on my site. I am have been unsuccessful thus far with the issue.

My site is StoriesThroughTori.com 

The page under construction can be found under the Info nav. tab "Wardrobe & Styling Guide". The password to view is "blue."

Here is an example of CSS I have written for the Women tab:

section[data-section-id="615e63a59d652a3af23d90a5"]
{
<img src="Amazon Women.png" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="Asvivid Womens Lace Crochet V Neck Blouse Casual Short Sleeve Tunic Shirts Tops" title="Asvivid Womens Lace Crochet V Neck Blouse Casual Short Sleeve Tunic Shirts Tops" href="https://www.amazon.com/dp/B092VHNPTM/?coliid=I2Y5HOUGOLJMW5&amp;colid=3OWL86Y62P9Q6&amp;psc=1&amp;ref_=lv_ov_lig_dp_it" coords="512,778,156,345" shape="rect">
    <area target="_blank" alt="IWOLLENCE Women's Waffle Knit Tunic Blouse Tie Knot Henley Tops Loose Fitting Bat Wing Plain Shirts" title="IWOLLENCE Women's Waffle Knit Tunic Blouse Tie Knot Henley Tops Loose Fitting Bat Wing Plain Shirts" href="https://www.amazon.com/dp/B07YZ7SZCL/?coliid=IV1KWQ6ZIWX6N&amp;colid=3OWL86Y62P9Q6&amp;ref_=lv_ov_lig_dp_it&amp;th=1" coords="592,347,953,780" shape="rect">
    <area target="_blank" alt="https://www.amazon.com/dp/B08ZCJ95Q6/?coliid=I245B4NBGPY8NT&amp;colid=3OWL86Y62P9Q6&amp;ref_=lv_ov_lig_dp_it&amp;th=1&amp;psc=1" title="https://www.amazon.com/dp/B08ZCJ95Q6/?coliid=I245B4NBGPY8NT&amp;colid=3OWL86Y62P9Q6&amp;ref_=lv_ov_lig_dp_it&amp;th=1&amp;psc=1" href="Dokotoo Womens Crewneck Lace Crochet Pom Pom Flowy Short Sleeve Casual Shirts Blouses Tops" coords="1034,345,1393,781,1322,530" shape="rect">
    <area target="_blank" alt="Women's Baggy Wide Leg Overalls Casual Jumpsuit Rompers Harem Pants" title="Women's Baggy Wide Leg Overalls Casual Jumpsuit Rompers Harem Pants" href="https://www.amazon.com/dp/B07FF1J66J/?coliid=IQ9XK0DPKXRJB&amp;colid=3OWL86Y62P9Q6&amp;psc=1&amp;ref_=lv_ov_lig_dp_it" coords="155,875,515,1308" shape="rect">
    <area target="_blank" alt="R.Vivimos Womens Summer Halter Deep V Neck Sexy Patchwork Mini Short Dresses" title="R.Vivimos Womens Summer Halter Deep V Neck Sexy Patchwork Mini Short Dresses" href="https://www.amazon.com/dp/B01IHQGYFI/?coliid=I141DW9SLWSM4Z&amp;colid=3OWL86Y62P9Q6&amp;ref_=lv_ov_lig_dp_it&amp;th=1" coords="592,878,952,1308" shape="rect">
    <area target="_blank" alt="Adibosy Women's V Neck Jumpsuits Casual Sleeveless Romper Button Up Front Tie Knot Solid Short Jumpsuit Rompers" title="Adibosy Women's V Neck Jumpsuits Casual Sleeveless Romper Button Up Front Tie Knot Solid Short Jumpsuit Rompers" href="https://www.amazon.com/dp/B094HT5DTW/?coliid=I2Z3IMCERFNMH8&amp;colid=3OWL86Y62P9Q6&amp;ref_=lv_ov_lig_dp_it&amp;th=1" coords="1027,876,1393,1309" shape="rect">
    <area target="_blank" alt="KINGFEN Comfy Drawstring Casual Elastic Waist Shorts for Women Summer Beach Cotton Pull On Short with Pockets" title="KINGFEN Comfy Drawstring Casual Elastic Waist Shorts for Women Summer Beach Cotton Pull On Short with Pockets" href="https://www.amazon.com/KINGFEN-Bermuda-Drawstring-Sleeping-Clothes/dp/B08B676CSD/ref=sr_1_1_sspa?dchild=1&amp;keywords=green+shorts+simple+women&amp;qid=1633658433&amp;sr=8-1-spons&amp;psc=1&amp;smid=AO1NVSAN53IVK&amp;spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUFPWVo1T1UxRE9OQ1AmZW5jcnlwdGVkSWQ9QTA3NDIxNzgyRVg5SlJMSk1BUVVZJmVuY3J5cHRlZEFkSWQ9QTA0NzEzNTAyNExTMjk2TU9SV0QzJndpZGdldE5hbWU9c3BfYXRmJmFjdGlvbj1jbGlja1JlZGlyZWN0JmRvTm90TG9nQ2xpY2s9dHJ1ZQ==" coords="514,1844,155,1410" shape="rect">
    <area target="_blank" alt="Mordenmiss Women's Wide Leg Pants Cotton Two-Layer Ankle Capris Trousers" title="Mordenmiss Women's Wide Leg Pants Cotton Two-Layer Ankle Capris Trousers" href="https://www.amazon.com/dp/B07Q2MP5GS/?coliid=I1TO4SDZO4QDZ9&amp;colid=3OWL86Y62P9Q6&amp;psc=1&amp;ref_=lv_ov_lig_dp_it" coords="952,1847,590,1409" shape="rect">
    <area target="_blank" alt="Relipop Women's Floral Flared Short Skirt Polka Dot Pleated Mini Skater Skirt with Drawstring" title="Relipop Women's Floral Flared Short Skirt Polka Dot Pleated Mini Skater Skirt with Drawstring" href="https://www.amazon.com/dp/B07MLF5DNZ/?coliid=IENGVL09PQ0MF&amp;colid=3OWL86Y62P9Q6&amp;psc=0&amp;ref_=lv_ov_lig_dp_it" coords="1391,1844,1031,1410" shape="rect">
</map>
}

 

Link to comment
  • Replies 3
  • Views 678
  • Created
  • Last Reply

Top Posters In This Topic

On 10/13/2021 at 8:50 AM, torilistoe said:

Just a curious, why you don't use Image Blocks or Gallery to achieve these? We can use CSS to make top left/top right to be round. It will be easier.

To make the images clickable, you will need to measure the coordinates of each image and set up the code. You need to do it for all screen sizes, because for each screen size, the image size will resize causing the coordinates to change.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.