Question

我正在创建一个简单的ASP.NET Web应用程序。我有一张将不同机器组合/结合在一起的图像，并且要根据我从使用jquery进行API调用获得的运行状态，用不同的颜色（红色/绿色/黄色）突出显示这些机器。 / p>

我已经使用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

中的步骤进行操作

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

1 个答案: