area标签仅支持坐标映射与跳转，无法实现图片局部放大；需结合js读取coords坐标、计算缩放偏移，并用css动态渲染放大效果，且坐标必须基于naturalwidth/naturalheight归一化。
area 标签不能实现图片局部放大效果，它只负责定义可点击热区，不控制缩放、渲染或视觉变化。
area 的真实能力仅限于跳转与映射
area 必须嵌套在 map 中，配合 img 的 usemap 属性，才能把图片某一块区域变成链接。它的作用就是「坐标映射 + 跳转触发」，没有样式控制权，也不能改变图片尺寸、裁剪内容或叠加放大层。
- 常见错误是以为写上
coords就能“高亮”或“放大”对应区域——实际什么都不会变，除非你额外用 JS/CSS 做干预 -
shape="circle"和coords="100,150,30"只告诉浏览器：“从 (100,150) 开始，半径 30 像素的圆内点击有效”，仅此而已
想靠 area 实现放大？必须手动补全三块拼图
单纯用 area 不可能放大，但可以把它作为坐标来源，再结合其他技术：
-
area提供原始图片中的像素坐标（比如coords="200,100,50"表示一个圆心在 (200,100)、半径 50 的区域） - 用 JavaScript 读取这些坐标，计算出对应位置的缩放偏移量
- 动态更新另一个元素（如
div或canvas）的transform-origin或background-position - 高清图必须提前加载完成，否则
naturalWidth为 0，坐标归一化会失效
缩放时 coords 必须重算，不能硬编码
响应式布局下，图片 CSS 尺寸（如 width: 100%）和原始尺寸（naturalWidth）往往不等。此时直接写死 coords="200,100,50" 会导致热区漂移：
- 图片原始尺寸是 800×600，但显示为 400×300 → 所有
coords值需除以 2 - 更稳妥的做法是监听
resize和load，用img.naturalWidth / img.offsetWidth算出缩放比，再动态重设每个area的coords属性（通过 JS 修改 DOM） - 注意：修改
coords后无需重新绑定事件，浏览器会自动识别新坐标
area 本身不渲染、不放大、不跟随鼠标，它只是个静默的坐标锚点。真正做放大的永远是 JS 计算 + CSS 渲染，而最容易被忽略的是：坐标必须基于 naturalWidth/naturalHeight 归一化，而不是容器宽高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
