必须同时写id和name，因为chrome、firefox优先匹配name，而safari旧版和部分ie内核fallback到id；html5规范要求二者值一致，否则映射无效，且name值须为字母数字下划线短横线组合、大小写敏感、不含#号。
name 属性不是可选的——没它，<map></map> 就无法和 <img> 关联，点击区域直接失效。
为什么必须同时写 id 和 name？
不同浏览器对 usemap 的解析逻辑不一致：Chrome、Firefox 优先匹配 <map></map> 的 name 值（带 # 前缀），而 Safari 旧版本、部分 IE 衍生内核会 fallback 到 id。只写一个容易在某类设备上“点了没反应”。
-
usemap="#workmap"对应的是<map name="workmap"></map>，不是<map id="workmap"></map> - 但为保兼容，必须两者都设且值相同：
<map id="workmap" name="workmap"></map> - HTML5 规范明确要求
name和id必须一致，否则视为无效映射
name 值的命名规则和常见错误
看似简单，但错一个字符就断链。浏览器不会报错，只是静默失效。
- 值里不能含空格、中文、特殊符号（如
@、/、.），只建议用字母、数字、下划线、短横线 -
usemap引用时必须带#前缀，但<map></map>自身的name属性值里不能带# - 大小写敏感：
usemap="#WorkMap"和<map name="workmap"></map>不匹配 - 多个
<map></map>共存时，name必须全局唯一，否则后加载的会覆盖前一个
JavaScript 动态操作 name 属性要注意什么？
改 name 不等于改完就生效——关联关系不会自动刷新，尤其当 <img> 已渲染完成。
- 直接赋值
mapEl.name = "newName"只更新 DOM 属性，<img usemap>不会自动同步 - 必须同步更新对应
<img>的usemap属性：imgEl.useMap = "#newName" - 如果
<area>是通过 JS 动态插入的，确保插入前<map></map>的name已存在且与usemap一致 - 不要用
setAttribute("name", ...)替代点语法，某些旧浏览器对<map></map>的name属性 setter 有特殊处理
真正麻烦的不是写对 name，而是它出错时不报错、不警告、不提示——页面看起来正常，只是热点点不动。检查时优先确认三件事：<map></map> 有没有 name、<img> 的 usemap 值是否带 #、两者字符串是否完全一致（包括大小写和不可见字符）。
