如何为图片特定位置添加链接？附购物篮图标实现方案

你问的给图片里的购物篮图标添加跳转链接的问题，我整理了两种实用的HTML实现方案，具体如下：

这种方案用图标字体替代原有图片里的购物篮，好处是图标能灵活缩放且不失真，还能轻松调整样式。实现步骤很简单：

1. 先引入Font Awesome的样式文件
2. 在需要的位置用<i>标签调用购物篮图标，再把它嵌套在<a>标签里就能实现跳转

示例代码：

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

如果你想保留自己现有的带购物篮的图片，那图片映射就是最合适的方案。它能给图片上的指定区域设置点击跳转：

1. 给<img>标签添加usemap属性，关联对应的映射名称
2. 用<map>和<area>标签定义可点击区域，其中shape指定区域形状（这里用矩形rect），coords是区域的坐标（格式为左上角x 左上角y 右下角x 右下角y）

示例代码：

<img src='https://i.sstatic.net/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>

小提示：两种方案各有适用场景——Font Awesome适合需要灵活调整图标样式的情况，图片映射则适合你已经有设计好的带购物篮的图片，只需要给特定区域加跳转的场景。

内容的提问来源于stack exchange，提问作者csandreas1