area标签的shape属性合法取值为rect、circle、poly和default，分别对应矩形、圆形、多边形和整个图像区域，其他值如triangle、oval等均不合法。

area 标签的 shape 属性取值有哪些

HTML 中 <area> 的 shape 属性决定热点区域形状，只有四个合法值：rect、circle、poly、default。浏览器忽略其他字符串（比如 square 或 ellipse），会退化为 rect 行为或直接失效。

常见误写是把 poly 拼成 polygon，或把 rect 写成 rectangle —— 这些都会导致区域不响应点击。

• rect：需 4 个坐标，格式为 x1,y1,x2,y2（左上 + 右下）
• circle：需 3 个坐标，格式为 cx,cy,r（圆心 x、y 和半径）
• poly：需偶数个坐标，按顺时针/逆时针顺序列出顶点，如 x1,y1,x2,y2,x3,y3
• default：覆盖整个图片，无需 coords，但必须放在所有 <area> 最后

coords 坐标单位和参照系怎么算

coords 的数值单位是像素，原点在图片左上角（0,0），x 向右递增，y 向下递增。它**严格依赖 <img> 的实际渲染尺寸**，不是原始图片分辨率。

如果图片用 CSS 缩放（比如 width: 100%; height: auto），但没同步更新 coords，热点就会错位。现代做法是：要么用固定宽高的 <img>，要么用 JavaScript 动态换算坐标（需监听 resize）。

• 用 getBoundingClientRect() 获取图片当前宽高，再按比例缩放原始 coords
• 避免用百分比值写死 coords（HTML 不支持）
• 调试时可在控制台打印 document.querySelector('img').naturalWidth 和 offsetWidth 对比缩放比

area 标签必须嵌套在 map 里才能生效

单独写 <area> 是无效的。它必须包裹在 <map></map> 元素中，且该 <map></map> 必须通过 img 的 usemap 属性绑定——注意 usemap 的值要带 # 前缀，比如 usemap="#hotmap" 对应 <map name="hotmap"></map>。

Twitter热点监控与推文生成

每小时自动在推特搜索中国、加密货币、国际热点、美国热点、特朗普等话题的热度信息，提取前十热点，依据 X 平台真实算法权重（开源代码数据）为每个热点生成高曝光推文或线程。用户提及“推特热点”“Twitter热点”“推特搜索”“热点推文”“生成推文”“社交媒体监控”“Twitter监控”等关键词时触发。

下载

常见错误包括：usemap 拼错 name、漏掉 #、<map></map> 放在 DOM 之外（如 里）、或多个 <map></map> name 重复导致绑定错乱。

• <img src="a.jpg" usemap="#navmap"> → 必须有 <map name="navmap"></map>
• 一个 <map></map> 可被多张图复用，但每张图只能绑定一个 usemap
• <area> 不支持 tabindex，默认不可键盘聚焦；如需可访问性，得额外加 ARIA 属性

点击 area 触发跳转的链接怎么写

给 <area> 加 href 属性即可跳转，和 <a></a> 一样支持相对路径、绝对 URL、锚点甚至 javascript:void(0)。但要注意：target 属性只在 href 存在时生效，且浏览器策略可能阻止 target="_blank" 弹窗（尤其无用户手势触发时）。

如果想执行 JS 而非跳转，别用 href="javascript:..."，改用 onclick 事件更可控。但需手动调用 event.preventDefault() 防止默认跳转行为。

• 推荐写法：<area shape="rect" coords="10,10,50,50" href="/product?id=123" target="_self">
• JS 处理：<area ... onclick="handleClick(event); return false;">
• 不支持 download 属性，无法直接下载文件

复杂交互建议用 SVG 替代 image map —— 坐标更稳定、支持 CSS 动画、无障碍语义也更清晰。但若必须用 <area>，务必验证各浏览器对 shape 和 coords 的解析一致性，尤其是 Safari 对小数坐标的截断行为。