如何在图像的特定点上添加链接？

Question

我有以下图片，我想在购物篮图标上添加一个链接。怎么可能？

感谢您的回答。现在我有两种方法可以做到这一点或使用 html ：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



<p style="font-weight:normal;text-transform:uppercase;color:#FFD700;background-color:#000000;border: 5px ridge #ababab;letter-spacing:4pt;word-spacing:-3pt;font-size:42px;text-align:center;font-family:georgia, serif;line-height:4;margin:0px;padding:0px;width:100%;height:183px;">New Online Shop <a href="https://frix-cy.com/shop/"><i class="fa fa-shopping-cart " aria-hidden="true"></i></a>

</p>

或者使用图片上的html shape attribute @blue回答：

 <img src='https://i.stack.imgur.com/5I8q6.jpg' width='500' height='150' usemap='#basket' />
    <map name='basket'>
        <area shape='rect' coords='440 50 500 100' href='www.your_link.com' alt='basket_icon' />
    </map>
    <p>Click on the basket</p>

Answer 1

尝试使用地图和区域在图片上选择特定的区域

HTML

＆＃13;

＆＃13;

   <img src='https://i.stack.imgur.com/5I8q6.jpg' width='500' height='150' usemap='#basket' />
    <map name='basket'>
        <area shape='rect' coords='440 50 500 100' href='www.your_link.com' alt='basket_icon' />
    </map>
    <p>Click on the basket</p>

＆＃13;

＆＃13;

＆＃13;

我希望这有帮助！