area标签无法直接实现高质量悬浮提示，需结合map、img与javascript动态计算坐标并定位提示层；缩放时coords须按比例重算，推荐用svg替代以简化开发并提升可靠性。
area 标签本身不支持 title 或 tooltip 效果
直接给 <area> 加 title 属性虽然能触发浏览器默认气泡提示，但体验差：延迟高、样式不可控、移动端基本不响应，且无法承载富文本或交互内容。商品展示图需要的是「悬停即显、位置贴图、可含价格/规格等结构化信息」的悬浮框，<area> 单独做不到。
必须配合 map + img + JavaScript 才能实现可控悬浮框
核心思路是：用 <map></map> 定义热点区域，监听 <img> 的 mousemove 和 mouseleave 事件，根据鼠标坐标判断是否落在某个 <area> 的几何范围内（如 rect、circle、poly），再动态显示/隐藏一个绝对定位的 <div> 提示层。
<ul>
<li>
<code><area> 的 coords 值必须与图片原始尺寸严格对应；缩放图片时需按比例重算坐标，否则热区错位
getBoundingClientRect() 获取图片位置，再减去 event.clientX/Y 计算相对坐标，避免滚动条偏移干扰poly 区域做点在多边形内判断，可用射线法（简单场景）或 isPointInPath()（配合 <canvas></canvas> 路径，精度更高）常见错误：coords 坐标写错或未适配图片缩放
比如原图 800×600，<area shape="rect" coords="100,50,200,120"> 表示左上(100,50)到右下(200,120)的矩形。但如果页面中 <img> 被 CSS 缩放到 400×300，coords 必须同步除以 2，否则热区只覆盖原图左上角四分之一。
- 不要靠肉眼调
coords，用开发者工具测出图片渲染后尺寸，再按比例换算 - 避免用
width/height属性缩放图片——它会拉伸<map></map>热区；优先用 CSSmax-width+height: auto - 若需响应式，建议 JS 中监听
resize，动态重算所有coords映射关系
更简单的替代方案：用 SVG 替代 image map
如果项目允许小幅重构，SVG 是更现代、更可靠的选择：<svg></svg> 内嵌 <image></image> 和带 onmouseover 的 <rect></rect>/<circle></circle>，天然支持坐标系、缩放同步、CSS 样式和过渡动画，无需手动判断点是否在区域内。
- SVG 中每个商品区域可直接绑定
data-price、data-sku等属性，提示框内容提取更干净 - 用
pointer-events: bounding-box可让非规则形状热区响应更准确 - 兼容性足够好（IE9+），且比 canvas 方案更轻量、更利于 SEO
