HTML area标签制作可点击海报区域教程-html教程-PHP中文网

标签必须嵌套在中且关联带usemap属性的才生效；失效主因是结构断链、坐标未适配响应式或应被现代方案替代。

html area标签制作可点击海报区域教程

<area> 标签本身不能直接“制作可点击海报区域”——它必须嵌套在 <map></map> 内，且只对关联的 <img>（带 usemap）生效；脱离这个上下文，<area> 完全不渲染、无交互、被浏览器忽略。

为什么 `<area>` 点不了？常见失效场景

绝大多数“点不动”问题，根源不在写法错，而在结构断链：

图片没加 usemap 属性，或属性值与 <map></map> 的 name 不匹配（大小写敏感）
<map></map> 放在 DOM 后面，但图片已提前加载完成，浏览器跳过映射绑定
使用了 background-image 而非 <img> 标签——<area> 对 CSS 背景图完全无效
响应式缩放后坐标未重算：原始 coords 是按原图尺寸写的，页面缩放或 width/height 缩放会导致热区偏移

`<area>` 坐标怎么写才准？`shape` 和 `coords` 对应关系

坐标不是凭感觉填的数字，必须严格匹配 shape 类型：

shape="rect" → coords="x1,y1,x2,y2"（左上、右下，注意不是宽高）
shape="circle" → coords="cx,cy,r"（圆心 x、y、半径）
shape="poly" → coords="x1,y1,x2,y2,x3,y3,..."（每对 xy 构成一个顶点，闭合多边形无需首尾重复）

示例：
<img src="poster.jpg" usemap="#mainMap">
<map name="mainMap"></map>
<area shape="rect" coords="100,50,300,120" href="/shop" alt="立即购买">
<area shape="circle" coords="500,200,40" href="/about" alt="了解我们">

Pptx To Html

使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。

下载

响应式海报下 `<area>` 坐标怎么动态适配？

纯 HTML/CSS 无法自动缩放 coords，必须用 JS 拦截并重算。关键逻辑是：监听图片加载完成 + 获取实际渲染尺寸 + 按比例缩放原始坐标。

原始坐标基于设计稿尺寸（如 1200×800），记为 baseW/baseH
运行时读取 img.naturalWidth/naturalHeight 或 img.clientWidth/clientHeight（推荐后者，反映真实渲染尺寸）
缩放系数 = currentWidth / baseW（宽高比不一致时，需分别计算并取 min，避免热区拉伸）
遍历所有 <area>，按规则重写 coords 字符串（矩形/圆形/多边形各需不同解析逻辑）

简单起手版（仅处理 rect）：
const img = document.querySelector('img[usemap]');
img.addEventListener('load', () => {
  const scale = img.clientWidth / 1200; // 假设原图宽1200
  document.querySelectorAll('area').forEach(area => {
    if (area.shape === 'rect') {
      const [x1, y1, x2, y2] = area.coords.split(',').map(Number);
      area.coords = [x1 * scale, y1 * scale, x2 * scale, y2 * scale].join(',');
    }
  });
});