javascript - 如何使用 jQuery maphilight 更改单击图像和突出显示的区域

Question

我有一个div和三个按钮。单击其中一个按钮时，调用我动态创建的 JavaScript 函数 ( createImageElements) ：和。之后，我调用初始化 jQuery maphilight 插件的函数div<img><map><area>highlightImageAreas()

$('input[name="floor"]').click(function () {
   createImageElements();
   highlightImageAreas();
})

function createImageElements() {
    var div = $("#imgDiv"); //the div
    div.empty();

    var newImg = new Image();
    newImg.id = 'buildingMapImg';
    newImg.useMap = '#buildingMap'
    newImg.setAttribute('class', 'map');
    newImage.attr("src", 'https://images.prismic.io/mystique/5d7c09b9-40e5-4254-ae1c-2c1cb59aa898_IMG3.jpg?auto=compress,format');
    div.append(newImg);

    var newMap = document.createElement('MAP');
    newMap.name = 'buildingMap';
    newMap.id = 'buildingMap';
    div.append(newMap);

    var myShapeCoords= [//the ShapeCoords]
        $(myShapeCoords).each(function (index, shapeCoord) {
            var newAreas = document.createElement("AREA");
            newAreas.id = "area"+ index++;
            newAreas.target = '_self';
            newAreas.shape = 'poly';
            newAreas.coords = shapeCoord;
            newAreas.dataset.maphilight = "{"fill":true,"fillColor":"FF0000","fillOpacity":0.5,"stroke":false,"strokeColor":"013220","strokeOpacity":1,"strokeWidth":1,"fade":true,"alwaysOn":true,"neverOn":false,"groupBy":false,"wrapClass":false,"shadow":false,"shadowX":0,"shadowY":0,"shadowRadius":6,"shadowColor":"000000","shadowOpacity":0.8,"shadowPosition":"outside","shadowFrom":false}"
            newMap.append(newAreas);
        })
    })
}

function highlightImageAreas() {
    $('map').imageMapResize();
    $('#buildingMapImg').maphilight(
        {
            fill: true,
            fillColor: '000000',
            fillOpacity: 0.2,
            stroke: true,
            strokeColor: 'ff0000',
            strokeOpacity: 1,
            strokeWidth: 1,
            fade: false,
            alwaysOn: true,
            neverOn: false,
            groupBy: false,
            wrapClass: false,
            shadow: false,
            shadowX: 0,
            shadowY: 0,
            shadowRadius: 6,
            shadowColor: '000000',
            shadowOpacity: 0.8,
            shadowPosition: 'outside',
            shadowFrom: false
        }
    );
}

当我第一次单击某个按钮时，所有这些都可以正常工作，但是当我第二次单击同一个按钮时，它只显示没有区域的图像。每次单击按钮时，我都想用他的区域更改图像。那可能吗？有什么建议/例子吗？

标签： javascriptjqueryjquery-pluginsmaphilight