Html+Css_利用img 的usemap属性 和 map 以及 area(list) 对图像敏感区域定位

1.利用img 的usemap属性，利用usemap对应到map的name或者id。

2.并在map标签里面嵌套多个area标签。

3.不同的area里面的href 属性 以及相对于图像原点（0,0）的coords 属性不一致,可以实现不同区域定位到不同的网址。

W3C原理讲解如下

核心源码：

纯html实现：

    <!--圆形产品的背景-->
        <div class="product_solution_list">
            <div class="product_solution_list_item">
                <img src="./src/img/product_D501.png" usemap="#D501"/>
                <map name="D501" id="D501">
                    <area shape="circle" coords="92,92,92" href="http://www.baidu.com" target="_blank"/>
                </map>
            </div>
            <div class="product_solution_list_item">
                <img src="./src/img/product_EA.png" usemap="#EA"/>
                <map name="EA" id="EA">
                    <area shape="circle" coords="92,92,92" href="http://www.baidu.com" target="_blank"/>
                </map>
            </div>
            <div class="product_solution_list_item">
                <img src="./src/img/product_kx.png" usemap="#KX"/>
                <map name="KX" id="KX">
                    <area shape="circle" coords="92,92,92" href="http://www.baidu.com" target="_blank"/>
                </map>
            </div>
            <div class="product_solution_list_item">
                <img src="./src/img/product_D500.png" usemap="#D500"/>
                <map name="D500" id="D500">
                    <area shape="circle" coords="92,92,92" href="http://www.baidu.com" target="_blank"/>
                </map>
            </div>
        </div>

实现效果

只有中间的圆形区域才对应鼠标敏感区域