使用Image Map Resize插件时提示area标签coords属性格式错误

浏览器抛出coords格式不符合要求的错误，核心原因是你第一个<area shape="rect">标签的coords属性值开头多了1个前置空格：coords=" 345, 204, 435, 283"。Image Map Resizer插件在初始化解析热区坐标时，会对coords值做格式校验，首尾多余空格会被判定为不符合「left,top,right,bottom」的纯数字逗号分隔格式，直接抛出错误终止初始化。

• 移除第一个area标签coords属性值开头的多余空格，修正后的map代码如下：

<map name="image-map">
    <area target="" shape="rect" coords="345, 204, 435, 283" href="kubo" alt="Kubo">
    <area target="" shape="rect" coords="439, 325, 500, 369" href="" alt="Bee">
    <area target="" shape="rect" coords="314, 356, 356, 384" href="" alt="Bridge">
</map>

• 排查插件加载路径：确认imageMapResizer.min.js的引入路径能正常访问，不存在404加载失败的问题。
• 全局校验所有热区的coords属性：所有矩形热区的coords值不能包含首尾空格、特殊字符，必须是4个以逗号分隔的正整数，顺序严格为左边界、上边界、右边界、下边界。

修改完成后刷新页面，控制台不再抛出格式错误，调整浏览器窗口大小改变图片显示宽度时，热区点击位置和图片实际区域完全匹配，即功能正常。

内容的提问来源于stack exchange，提问作者Kimpoy