图像映射
map/area 可点击区域、矩形/圆形/多边形热区
图像映射
<map> + <area> 让一张图片的不同区域变成可点击的链接——适合导航图、流程图。
学完本章你将： 掌握 map/area 热区定义、矩形/圆形/多边形区域。
基本用法
html
<img src="computer.jpg" alt="电脑" usemap="#workmap">
<map name="workmap">
<!-- 矩形热区：左上角(x,y) 到 右下角(x,y) -->
<area shape="rect" coords="34,44,270,350"
href="monitor.html" alt="显示器">
<!-- 圆形热区：圆心(x,y), 半径 -->
<area shape="circle" coords="337,300,44"
href="keyboard.html" alt="键盘">
<!-- 多边形热区：每个顶点的坐标 -->
<area shape="poly" coords="300,50,400,30,420,100,320,120"
href="mouse.html" alt="鼠标">
</map>坐标获取
html
<!-- 如何知道坐标？ -->
<!-- 1. 用图片编辑软件（PS、画图）查看像素坐标 -->
<!-- 2. 用浏览器开发者工具定位 -->
<!-- 3. 在线工具：image-map.net -->完整示例
html
<img src="china-map.png" alt="中国地图" usemap="#china">
<map name="china">
<area shape="poly" coords="400,100,420,80,450,90,460,120..."
href="beijing.html" alt="北京" title="点击查看北京">
<area shape="poly" coords="500,200,520,180,550,190..."
href="shanghai.html" alt="上海" title="点击查看上海">
</map>