Multiple links in one image?

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>
}

Hi,

Can you share image file + all links? We can code it with HTML/CSS easier

On 10/10/2021 at 5:47 AM, tuanphan said:

Hi,

Can you share image file + all links? We can code it with HTML/CSS easier

1. https://www.amazon.com/dp/B092VHNPTM/?coliid=I2Y5HOUGOLJMW5&colid=3OWL86Y62P9Q6&psc=1&ref_=lv_ov_lig_dp_it

2. https://www.amazon.com/dp/B07YZ7SZCL/?coliid=IV1KWQ6ZIWX6N&colid=3OWL86Y62P9Q6&ref_=lv_ov_lig_dp_it&th=1

3. https://www.amazon.com/dp/B08ZCJ95Q6/?coliid=I245B4NBGPY8NT&colid=3OWL86Y62P9Q6&ref_=lv_ov_lig_dp_it&th=1&psc=1

4. https://www.amazon.com/dp/B07FF1J66J/?coliid=IQ9XK0DPKXRJB&colid=3OWL86Y62P9Q6&psc=1&ref_=lv_ov_lig_dp_it

5. https://www.amazon.com/dp/B01IHQGYFI/?coliid=I141DW9SLWSM4Z&colid=3OWL86Y62P9Q6&ref_=lv_ov_lig_dp_it&th=1

6. https://www.amazon.com/dp/B094HT5DTW/?coliid=I2Z3IMCERFNMH8&colid=3OWL86Y62P9Q6&ref_=lv_ov_lig_dp_it&th=1

7. https://www.amazon.com/KINGFEN-Bermuda-Drawstring-Sleeping-Clothes/dp/B08B676CSD/ref=sr_1_1_sspa?dchild=1&keywords=green+shorts+simple+women&qid=1633658433&sr=8-1-spons&psc=1&smid=AO1NVSAN53IVK&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUFPWVo1T1UxRE9OQ1AmZW5jcnlwdGVkSWQ9QTA3NDIxNzgyRVg5SlJMSk1BUVVZJmVuY3J5cHRlZEFkSWQ9QTA0NzEzNTAyNExTMjk2TU9SV0QzJndpZGdldE5hbWU9c3BfYXRmJmFjdGlvbj1jbGlja1JlZGlyZWN0JmRvTm90TG9nQ2xpY2s9dHJ1ZQ==

8. https://www.amazon.com/dp/B07Q2MP5GS/?coliid=I1TO4SDZO4QDZ9&colid=3OWL86Y62P9Q6&psc=1&ref_=lv_ov_lig_dp_it

9. https://www.amazon.com/dp/B07MLF5DNZ/?coliid=IENGVL09PQ0MF&colid=3OWL86Y62P9Q6&psc=0&ref_=lv_ov_lig_dp_it

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

1. https://www.amazon.com/dp/B092VHNPTM/?coliid=I2Y5HOUGOLJMW5&colid=3OWL86Y62P9Q6&psc=1&ref_=lv_ov_lig_dp_it

2. https://www.amazon.com/dp/B07YZ7SZCL/?coliid=IV1KWQ6ZIWX6N&colid=3OWL86Y62P9Q6&ref_=lv_ov_lig_dp_it&th=1

3. https://www.amazon.com/dp/B08ZCJ95Q6/?coliid=I245B4NBGPY8NT&colid=3OWL86Y62P9Q6&ref_=lv_ov_lig_dp_it&th=1&psc=1

4. https://www.amazon.com/dp/B07FF1J66J/?coliid=IQ9XK0DPKXRJB&colid=3OWL86Y62P9Q6&psc=1&ref_=lv_ov_lig_dp_it

5. https://www.amazon.com/dp/B01IHQGYFI/?coliid=I141DW9SLWSM4Z&colid=3OWL86Y62P9Q6&ref_=lv_ov_lig_dp_it&th=1

6. https://www.amazon.com/dp/B094HT5DTW/?coliid=I2Z3IMCERFNMH8&colid=3OWL86Y62P9Q6&ref_=lv_ov_lig_dp_it&th=1

7. https://www.amazon.com/KINGFEN-Bermuda-Drawstring-Sleeping-Clothes/dp/B08B676CSD/ref=sr_1_1_sspa?dchild=1&keywords=green+shorts+simple+women&qid=1633658433&sr=8-1-spons&psc=1&smid=AO1NVSAN53IVK&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUFPWVo1T1UxRE9OQ1AmZW5jcnlwdGVkSWQ9QTA3NDIxNzgyRVg5SlJMSk1BUVVZJmVuY3J5cHRlZEFkSWQ9QTA0NzEzNTAyNExTMjk2TU9SV0QzJndpZGdldE5hbWU9c3BfYXRmJmFjdGlvbj1jbGlja1JlZGlyZWN0JmRvTm90TG9nQ2xpY2s9dHJ1ZQ==

8. https://www.amazon.com/dp/B07Q2MP5GS/?coliid=I1TO4SDZO4QDZ9&colid=3OWL86Y62P9Q6&psc=1&ref_=lv_ov_lig_dp_it

9. https://www.amazon.com/dp/B07MLF5DNZ/?coliid=IENGVL09PQ0MF&colid=3OWL86Y62P9Q6&psc=0&ref_=lv_ov_lig_dp_it

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.