如何修改使用maphilight JS的Image Map（图片映射）边框颜色？

Maphilight的高亮效果是通过Canvas渲染的，不是普通CSS的outline属性能控制的，所以你用outline:0不会生效。可以通过以下两种方式修改边框颜色：

方法1：初始化时全局配置 #

修改调用maphilight()的代码，传入strokeColor（边框颜色）、strokeWidth（边框宽度）等配置项，统一设置所有区域的高亮样式：

$(function() {
    $('.map').maphilight({
        strokeColor: '#0099cc', // 替换成你需要的颜色值
        strokeWidth: 2,         // 可选：调整边框粗细
        fillOpacity: 0.1        // 可选：调整填充区域透明度
    });
});

方法2：给单个区域单独配置 #

如果需要不同区域用不同的边框颜色，可以在<area>标签上添加data-maphilight属性，单独设置该区域的样式：

<area id="left-eye" class="map" coords="118,36,148,80" shape="rect" href="javascript:void(0);" data-maphilight='{"strokeColor":"#0000ff","strokeWidth":3}'>
<area id="mouth" coords="121,84,198,118" shape="rect" data-maphilight='{"strokeColor":"#ff9900","strokeWidth":2}'>

修改后的完整代码示例 #

JavaScript #

$(function() {
    $('.map').maphilight({
        strokeColor: '#0099cc',
        strokeWidth: 2,
        fillOpacity: 0.1
    });
});
var myData = {
    "left-eye": {
        "title": "This point A",
        "description": "Lorem ipsum A dolor sin amet."
    },
    "mouth": {
        "title": "This point B",
        "description": "Lorem ipsum B dolor sin amet."
    },
};

var areas         = document.getElementsByTagName('area'),
    bubble        = document.getElementById('myBubble'),
    bubbleContent = document.getElementById('myBubbleContent'),
    bubbleClose   = document.getElementById('myBubbleCloseButton');

// 点击区域弹出气泡
for(var i=0, l=areas.length; i<l; i++) {
  areas[i].addEventListener('click', openBubble, false);
}

// 关闭气泡
bubbleClose.addEventListener('click', closeBubble, false);

function openBubble() {
  var content = myData[this.id];
  bubbleContent.innerHTML = '<h3>' + content.title + '</h3>'
                          + '<img src="' + (content.image || '') + '" alt="" />'
                          + '<p>' + content.description + '</p>';
  bubble.style.top = (event.clientY + 1) + "px";                        
  bubble.style.left = (event.clientX + 1) + "px";                        
  bubble.className = 'shown';
}

function closeBubble() {
  bubble.className = '';
}

// 响应式图片映射
imageMapResize();

CSS #

#myWrapper{ position: relative; font-family: Arial, Helvetica, sans-serif; }
#myImage{ display: block; }
#myBubble{  background: #fff; border: 1px solid #aaa; padding: .5rem 1rem; display: none; top: 1.5rem; left: 1.5rem; width: 15rem; cursor: pointer; }
#myBubble.shown{position: fixed; display: block;cursor: pointer; }
#myBubble img{ display: block; width: 100%;cursor: pointer; }
#myBubbleCloseButton{ position: absolute; top: 0; right: 0; padding: .5rem; background: #eee; line-height: 1; cursor: pointer; }
#myBubbleCloseButton:hover{ background: #000; color: #fff; }

HTML #

<script src="https://cdn.rawgit.com/davidjbradshaw/image-map-resizer/master/js/imageMapResizer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js"></script>

<div id="myWrapper">
   <img id="myImage" src="http://tinypic.com/images/goodbye.jpg" usemap="#myMap" alt="" class="map" />
   <map name="myMap" id="myMap">
      <area id="left-eye" class="map" coords="118,36,148,80" shape="rect" href="javascript:void(0);">
      <area id="mouth"  coords="121,84,198,118" shape="rect">
   </map>
   <div id="myBubble">
      <div id="myBubbleContent"></div>
      <div id="myBubbleCloseButton">✕</div>
   </div>
</div>

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