代码
<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>
总结
- img标签须使用
usemap
属性与map标签中的name
属性或者id
进行绑定(根据不同浏览器),这里同时添加name
、id
属性;且usemap
的属性值须带有#
; - 使用map标签将area标签进行包裹;
- 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个坐标点,最后一个点的坐标应该与第一个相同,若不同浏览器会自动补全。 - href映射到图片或者页面:可以将映射区域映射到不同的页面或者图片。
href = "index.html" href = "image.jpg"
关于更多图像映射,可以在W3C了解更多内容。