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

Question

我正在创建一个简单的 ASP.NET Web 应用程序。我有一张不同机器组合/连接在一个图像中的图像，我想根据我从使用 jquery 的 API 调用获得的运行状态，用不同的颜色（红色/绿色/黄色）突出这些机器。

我使用https://www.image-map.net/ 创建了一个图像映射，并将我的图像分为 5 个部分。我正在使用 (https://davidlynch.org/projects/maphilight/docs/) MapHilight，它可以帮助我突出显示不同的图像映射，并且它在全屏分辨率下正常工作。问题是它不支持响应，当我调整浏览器大小时，由于图像地图坐标不会根据浏览器大小自动更改，突出显示往往是静态大小并且与图像地图。此外，当浏览器尺寸变得非常小时，它会在同一页面上复制 2-3 次图像。

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

------------------------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 });

以下是浏览器调整大小后出现的图片

我也尝试过 (http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html) 让我的图像地图变得响应，但它不能很好地与 MapHilight 一起使用。

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

感谢您的帮助！

Answer 1

我已经使用 Image Mapster jquery 解决了这个问题。我已按照以下链接http://blog.thehumangeo.com/making-imagemaps-fun.html

上提供的以下步骤进行操作