HTML image map 图像映射
HTML图像映射map+area：<map name><area shape='rect/circle/poly' coords='x1,y1,x2,y2' href title alt>点击图片不同区域跳转不同链接、响应式图像映射(image-map-resizer JS库)、与CSS精灵图(CSS sprites)对比 · 难度：入门 · +10XP
HTML 图像映射 —— 一张图多个链接
你见过中国地图点击每个省份跳转不同页面的效果吗？这就是图像映射（Image Map）。
基本结构
<img src="china-map.png" usemap="#chinaMap" alt="中国地图">
<map name="chinaMap">
<area shape="rect" coords="0,0,100,100" href="beijing.html" alt="北京">
<area shape="circle" coords="200,150,30" href="shanghai.html" alt="上海">
<area shape="poly" coords="300,100,350,50,400,100,350,200" href="gd.html" alt="广东">
</map>关键：img的usemap值前面要加#，指向map的name。
area的shape类型
| shape | coords格式 |
|---|---|
| rect | x1,y1,x2,y2（左上,右下） |
| circle | cx,cy,r（圆心,半径） |
| poly | x1,y1,x2,y2,...（多边形各顶点） |
动手练习
- 基础练习：找一张三个水果的图，用image map让每个水果跳转不同页面。
- 进阶应用：做人体器官示意图——点击不同部位显示对应器官名称。
- 项目实战：用在线工具生成多边形坐标，做中国地图省份点击。