ismap 是服务端图像映射,点击发送坐标至服务器处理;usemap 是客户端映射,通过 <map> 和 <area> 在浏览器内完成区域跳转,无需请求。

ismap 和 usemap 都是用来实现图片热点(image map)的,但它们走的是完全不同的技术路径:一个靠服务器,一个靠浏览器。
ismap 是服务端图像映射,依赖 CGI 或后端处理
当你给 <img> 加上 ismap 属性(比如 <img src="map.png" ismap>),浏览器点击图片任意位置时,会把鼠标坐标(如 ?120,85)作为查询参数追加到 src 的 URL 后面,然后发起一次新请求。这个请求最终要由服务器接收、解析坐标、判断逻辑并返回响应。
- 必须配合可执行脚本(如 PHP/Python CGI)才能生效,纯静态 HTML 无法处理
- URL 变成类似
map.php?120,85,后端得手动拆解$_SERVER['QUERY_STRING']获取坐标 - 不支持
<map>和<area>标签,所有区域逻辑全靠后端硬编码 - 兼容性极老,现代开发中基本只在遗留系统或特殊嵌入式场景里出现
usemap 是客户端图像映射,纯前端完成
usemap 属性指向一个 <map> 元素(例如 usemap="#region-map"),而 <map> 内部用多个 <area> 定义热点区域。整个坐标判断、链接跳转都在浏览器里完成,不发额外请求。
-
<map>必须同时有name和id属性(如<map name="region-map" id="region-map">),否则部分浏览器(尤其是旧版 IE)可能无法关联 -
<area>的shape和coords要严格匹配图片像素尺寸,缩放图片会导致热点错位 - 不支持 CSS transform 缩放或
object-fit,响应式页面里容易失效 - 错误示例:
<img src="map.png" usemap="#map"><map name="m">——name值不一致,热点直接不工作
要不要同时写 ismap 和 usemap?
可以,而且是有意义的降级方案:当浏览器不支持 usemap(极罕见)或 JS 禁用时,ismap 仍能触发服务端 fallback。但要注意顺序和语义:
- 必须写成
<img src="map.png" ismap usemap="#region-map">,ismap不是布尔属性,不用赋值 - 服务端脚本需兼容两种坐标格式:
usemap下用户点不到区域时不会发请求;ismap下无论点哪都会发带坐标的请求 - 现代项目几乎不需要
ismap,除非你明确控制服务器且需要记录原始点击坐标(比如热力图分析)
真正容易被忽略的是 <map> 的命名一致性与图片原始尺寸绑定——改了图片宽高但没重调 <area> 的 coords,或者忘了同步 name 和 id,热点就静默失效,连控制台都不报错。

















