ismap和usemap不能共用也不能替代:ismap是服务端映射,点击发送坐标如map.php?120,85供后端解析;usemap是客户端映射,通过和在浏览器内完成区域匹配与跳转,不发请求。

ismap 和 usemap 不能共用,也不能互相替代——它们走的是两条完全不同的技术路线:一个靠后端解析坐标,一个靠浏览器匹配区域。
ismap 是服务端图像映射,必须配后端脚本才能工作
给 <img> 加上 ismap 属性(比如 <img src="map.png" ismap>),点击图片任意位置时,浏览器会把坐标拼成查询参数追加到 src 后面,发起一次新请求,例如:map.php?120,85。
- 后端必须能接收并解析这个 URL 中的坐标字符串,
$_SERVER['QUERY_STRING']或request.query_string是入口点 - 没有
<map></map>、<area>这类标签什么事,所有区域逻辑得硬编码在后端里 - 纯静态页面(如 GitHub Pages、本地 file:// 协议)完全无法响应,会直接 404 或返回原始图片
- 现代浏览器仍支持,但实际项目中几乎只出现在遗留 CGI 系统或嵌入式设备 Web 控制界面里
usemap 是客户端图像映射,纯前端完成跳转
usemap 的值必须指向一个 <map></map> 元素,比如 usemap="#region-map",而对应 <map></map> 得同时带 name="region-map" 和 id="region-map" —— 因为不同浏览器对 usemap 匹配 <map></map> 的依据不一致(有的认 name,有的认 id)。
-
<area>的shape和coords决定热点范围:矩形是rect+"x1,y1,x2,y2",圆形是circle+"cx,cy,r",多边形是poly+"x1,y1,x2,y2,x3,y3,..." - 所有坐标判断、链接跳转都在浏览器内完成,不发额外请求,也不依赖服务器
- 可离线使用(如本地 HTML 文件、CD-ROM),适合静态站点或文档型应用
- 注意
alt属性必须为每个<area>提供,否则无障碍体验和 SEO 都会受损
为什么不能同时写 ismap 和 usemap?
规范明确禁止二者共存。即使你写了 <img src="x.png" ismap usemap="#m">,浏览器只会按优先级处理其中一个 —— 大多数现代浏览器会忽略 ismap,只走 usemap 路径;而老旧浏览器可能只认 ismap,导致 <map></map> 完全失效。
- W3C 和 WHATWG 规范都强调:二者语义冲突,不可叠加
- 想做降级兼容?别用同一张图混搭。可以准备两套方案:主用
usemap,再单独提供一个带ismap的备用链接(比如文字版城市列表) - 调试时如果发现点击没反应,先检查控制台有没有 404(
ismap后端缺失)或控制台报错“no map found”(usemap的name/id不匹配)
真正容易被忽略的点是:usemap 的 name 和 id 必须一致且显式声明,ismap 的坐标格式没有空格(?120,85 不是 ?120, 85),后端拆解时少个 trim 就可能出错。











