Jquery 使用HTML/JS突出显示图像的特定部分

我正在创建一个简单的ASP.NET web应用程序。我在一张图片中有一个不同的机器组合/连接在一起的图片，我想根据它们的运行状态用不同的颜色（红色/绿色/黄色）突出显示这些机器，这是我通过jquery的API调用获得的

我已经使用创建了一个图像地图，并将我的图像分为5个部分。我正在使用（）MapHilight，它可以帮助我突出显示不同的图像贴图，并且可以在全屏分辨率下正常工作。问题是它不支持响应性，当我调整浏览器大小时，图像贴图坐标不会根据浏览器大小自动更改，高光往往是静态大小，并且与图像贴图不匹配。此外，当浏览器大小变小时，它会在同一页面上复制图像2-3次

以下是以全分辨率窗口大小显示的图像。

---------------------------HTML代码---------------------------------

我也尝试了（）使我的图像映射变得灵敏，但它不能很好地与MapHilight配合使用

我希望将我的图像分成不同的部分，并根据它们的运行状态信息（我从API获得并响应）以不同的颜色突出显示它们

谢谢你的帮助
 我使用Image Mapster jquery解决了这个问题。我遵循了以下链接中提供的步骤
我使用Image Mapster jquery解决了这个问题。我已经按照以下链接中提供的步骤进行了操作
请访问以查看和。提示：发布工作和代码。您需要显示代码和您迄今为止尝试过的内容，并具体说明哪些内容不起作用。现在你的问题基本上是“看不见的东西不能正常工作”，所以很难提供帮助。@mplungjan刚刚用代码更新了我的问题，希望这能有所帮助！请访问以查看和。提示：发布工作和代码。您需要显示代码和您迄今为止尝试过的内容，并具体说明哪些内容不起作用。现在你的问题基本上是“看不见的东西不能正常工作”，所以很难提供帮助。@mplungjan刚刚用代码更新了我的问题，希望这能有所帮助！
------------------------HTML CODE---------------------------------

   <img src="~/Content/Images/Picture1.png" width="1500" height="789" id="plant-image1" class="img-responsive map" usemap="#image-map" />
            <map name="image-map" id="map_id">
                <area id="CC1" target="" alt="caster" title="Caster" href="/Home/Caster" coords="-1,86,31,70,11,36,33,23,65,62,98,41,79,11,100,1,133,34,186,19,217,39,1,119" shape="poly">
                <area id="furnace" target="" alt="furnace" title="furnace" href="" coords="51,140,47,105,87,91,97,127,127,112,121,79,158,64,163,102,194,86,471,182,349,257,56,153" shape="poly">
                <area id="HSM" target="" alt="hsm" title="Hot Strip Mill" href="" coords="347,260,626,363,721,241,493,168,348,260" shape="poly">
                <area id="cooling line" target="" alt="cooling line" title="cooling line" href="" coords="647,336,925,433,973,338,711,255" shape="poly">
                <area id="downcoiler" target="" alt="downcoiler" title="downcoiler" href="" coords="910,458,972,344,1089,386,1060,511" shape="poly">
            </map>
     <div id="caster-title">Caster</div>
            <div id="caster-pos"></div>
            <div id="tunnelFurnace-title">Tunnel Furnace</div>
            <div id="pos2"></div>
            <div id="hsm-title">Finishing Mill</div>
            <div id="hsm-pos"></div>
            <div id="cooling-title">Cooling Section</div>
            <div id="pos4"></div>
            <div id="coiler-title">Down Coiler</div>
            <div id="pos5"></div>

<div class="col-lg-4 border-right">
    <div id="runstate"></div>

----------------------JavaScript-----------------------------------

function data1()
{
    $.ajax({
    url: '../api/runstate',
    type: 'GET',
    datatype: 'json',
    success: function (data) {
        var $table = $('<table/>').addClass('table');
        var $cap = $('<caption> Running Status of Different Production Line </caption>');
        var $header = $('<thead/>').html('<tr><th>Production Line Name</th><th>Run State</th><th>Run State Duration</th><th>Line Stop Begin</th><th>Line Stop End</th></tr>');
        $table.append($cap);
        $table.append($header);
        $.each(data, function (i, val) {
            var $row = $('<tr/>');
            $row.append($('<td/>').html(val.prod_line_name));
            $row.append($('<td/>').html(val.run_state));
            $row.append($('<td/>').html(val.run_state_duration));
            $row.append($('<td/>').html(val.line_stop_begin));
            $row.append($('<td/>').html(val.line_stop_end));
            $table.append($row);
        });
        $('#runstate').html($table);
        for (i = 0; i < data.length; i++) {
            var equip = data[i].prod_line_name;
            var x = $('#' + equip).data('maphilight') || {}
            if (data[i].run_state == "RUN") {
                x.fillColor = '32CD32'
                if (data[i].prod_line_name == 'CC1') {
                    document.getElementById("caster-pos").innerHTML = "Running";
                    document.getElementById("caster-pos").style.color = "green";
                }
                else if (data[i].prod_line_name == 'Furnace') {
                    document.getElementById("pos2").innerHTML = "Running";
                    document.getElementById("pos2").style.color = "green";
                }
                else if (data[i].prod_line_name == 'HSM') {
                    document.getElementById("hsm-pos").innerHTML = "Running";
                    document.getElementById("hsm-pos").style.color = "green";
                }
                else if (data[i].prod_line_name == 'FinishingMill') {
                    document.getElementById("pos4").innerHTML = "Running";
                    document.getElementById("pos4").style.color = "green";
                }
                else if (data[i].prod_line_name == 'DownCoiler') {
                    document.getElementById("pos5").innerHTML = "Running";
                    document.getElementById("pos5").style.color = "green";
                }
            }
            else if (data[i].run_state == "SLOW DOWN") {
                x.fillColor = 'FFFF00';
                if (data[i].prod_line_name == 'CC1') {
                    document.getElementById("caster-pos").innerHTML = "On-Hold";
                    document.getElementById("caster-pos").style.color = "yellow";
                }
                else if (data[i].prod_line_name == 'Furnace') {
                    document.getElementById("pos2").innerHTML = "On-Hold";
                    document.getElementById("pos2").style.color = "yellow";
                }
                else if (data[i].prod_line_name == 'HSM') {
                    document.getElementById("hsm-pos").innerHTML = "On-Hold";
                    document.getElementById("hsm-pos").style.color = "yellow";
                }
                else if (data[i].prod_line_name == 'FinishingMill') {
                    document.getElementById("pos4").innerHTML = "On-Hold";
                    document.getElementById("pos4").style.color = "yellow";
                }
                else if (data[i].prod_line_name == 'DownCoiler') {
                    document.getElementById("pos5").innerHTML = "On-Hold";
                    document.getElementById("pos5").style.color = "yellow";
                }
            }
            else if (data[i].run_state == "STOP") {
                x.fillColor = 'FF0000';
                if (data[i].prod_line_name == 'CC1') {
                    document.getElementById("caster-pos").innerHTML = "Stopped";
                    document.getElementById("caster-pos").style.color = "red";
                }
                else if (data[i].prod_line_name == 'Furnace') {
                    document.getElementById("pos2").innerHTML = "Stopped";
                    document.getElementById("pos2").style.color = "red";
                }
                else if (data[i].prod_line_name == 'HSM') {
                    document.getElementById("hsm-pos").innerHTML = "Stopped";
                    document.getElementById("hsm-pos").style.color = "red";
                }
                else if (data[i].prod_line_name == 'FinishingMill') {
                    document.getElementById("pos4").innerHTML = "Stopped";
                    document.getElementById("pos4").style.color = "red";
                }
                else if (data[i].prod_line_name == 'DownCoiler') {
                    document.getElementById("pos5").innerHTML = "Stopped";
                    document.getElementById("pos5").style.color = "red";
                }
            }
            x.fillOpacity = '0.3';
            $('#' + equip).data('maphilight', x);
        }
        $('.map').maphilight({ alwaysOn: true, stroke: 0 });