如何自定义 maphilight 图像热点区域的边框颜色

本文介绍如何通过 data-maphilight 属性灵活修改 maphilight 插件高亮区域的边框颜色、填充色等样式，无需修改 js 源码或覆盖 css，简单高效。

maphilight 是一个轻量级 jQuery 插件，用于为 HTML 热点区域添加视觉高亮效果（如描边、填充、阴影等）。默认情况下，它使用红色边框（strokeColor: "ff0000"），但你完全可以通过内联的 data-maphilight 属性来自定义样式，且支持逐个区域独立配置。

✅ 正确用法：使用 data-maphilight 属性

在 标签中添加 data-maphilight 属性，并传入 JSON 字符串，指定 strokeColor（十六进制颜色值，不带 #）即可：

? 注意：JSON 值中的颜色必须为 6 位纯十六进制（如 "ff0000"），不能带 # 符号，否则解析失败，将回退至默认红色。

? 其他常用可配置项（支持组合设置）

参数	类型	说明
strokeColor	string	边框颜色（如 "ff0000"）
strokeWidth	number	边框粗细（默认 1）
fillColor	string	填充颜色（默认透明）
fillOpacity	number (0–1)	填充不透明度（如 0.3）
fade	boolean	是否启用淡入动画（默认 true）
alwaysOn	boolean	是否常驻高亮（不依赖 hover/click）

例如，实现蓝色描边 + 半透明浅蓝填充 + 加粗边框：

data-maphilight='{"strokeColor":"0066cc", "strokeWidth":2, "fillColor":"cce6ff", "fillOpacity":0.4}'

⚠️ 注意事项

• ❌ 不要尝试用 CSS 的 outline 或 border 覆盖 —— maphilight 绘制的是 canvas> 或 SVG 覆盖层，非原生元素样式；
• ❌ 避免在初始化时全局覆盖选项（如 $('.map').map

  

  hilight({strokeColor: '...'})），这会统一影响所有区域；如需差异化样式，务必使用 data-maphilight 属性；
• ✅ 支持动态更新：修改 data-maphilight 后，调用 .maphilight('redraw') 可实时刷新（需确保插件版本 ≥ 1.4.0）；
• ✅ 建议将 data-maphilight 与 id/class 结合，便于后续 JS 动态注入（例如根据数据状态切换颜色）。

✅ 完整初始化建议（增强兼容性）

$(function() {
  // 初始化 maphilight（支持 data-maphilight 解析）
  $('.map').maphilight({
    neverOn: false,   // 允许手动触发
    wrapClass: true   // 为 canvas 添加 class 方便调试
  });

  // 如需响应式适配，保留 imageMapResize()
  imageMapResize();
});

通过 data-maphilight，你既能保持 HTML 结构清晰，又能实现像素级样式控制——这是 maphilight 推荐的标准实践，也是解决“为什么 outline 不生效”这类问题的根本路径。