HTML标签创建【图像映射】

代码

<img src="https://www.w3school.com.cn/i/eg_planets.jpg" alt="" usemap="#map">
    <map name="map" id="map">
        <area shape="circle" coords="129,161,10" href="https://www.w3school.com.cn/i/eg_merglobe.gif" target="_blank" alt="" />
    </map>

总结

1. img标签须使用usemap属性与map标签中的name属性或者id进行绑定(根据不同浏览器)，这里同时添加name、id属性；且usemap的属性值须带有#；
2. 使用map标签将area标签进行包裹；
3. map标签中属性shape表示定义映射区域形状，coords为对应映射形状配置：
   rect：矩形， coords：x1,y1,x2,y2表示矩形左上角和右下角；
   circle：圆形, coords：x1, y1, r x1,y1表示圆形的圆心点，r表示圆形的半径；
   poly：多边形，coords：x1,y1,x2,y2,…,xn,yn表示多边形的n个坐标点，最后一个点的坐标应该与第一个相同，若不同浏览器会自动补全。
4. href映射到图片或者页面：可以将映射区域映射到不同的页面或者图片。

   href = "index.html"          href = "image.jpg"
   

关于更多图像映射，可以在W3C了解更多内容。