使用jQuery更改图像映射的特定区域的颜色

时间:2018-07-24 13:17:17

标签: jquery html css

我有一个带有可单击区域的图像,并且我希望在满足某些条件时更改某些主题的颜色或启示。我尝试了以下命令:

$("#Map area").eq(cells[i][1]).focus().focus();

$(".mapify-svg polygon").eq(cells[i][1]).css("fill","rgba(218, 21, 21, 0.48)");

但是,当调整窗口大小时,颜色消失。

我的代码:

<img src="PLAN.png" width="1231px" height="589px" usemap="#Map">
<map name="Map" id="Map">
        <area class="cell" coords="1101,55,1210,143" shape="rect">
        <area class="cell" coords="1006,53,1093,143" shape="rect">
        <area class="cell" coords="931,55,996,143" shape="rect">
        <area class="cell"  coords="854,145,921,54" shape="rect">
        <area class="cell" coords="780,57,844,143" shape="rect">
        <area class="cell" coords="704,55,772,142" shape="rect">
        <area class="cell" coords="631,58,694,139" shape="rect">
        <area class="cell" coords="756,474,823,574" shape="rect">
        <area class="cell" coords="636,476,700,575" shape="rect">
        <area class="cell"coords="1019,242,1091,378" shape="rect">
        <area class="cell"  coords="930,245,1015,378" shape="rect">
        <area class="cell" coords="851,378,927,244" shape="rect">
        <area class="cell"coords="18,389,89,467" shape="rect">
        <area class="cell"  coords="160,489,215,562" shape="rect">
        <area class="cell" coords="269,488,325,560" shape="rect">
        <area class="cell" coords="331,487,386,561" shape="rect">
        <area class="cell" coords="441,467,524,561" shape="rect">
        <area class="cell" coords="449,351,537,408" shape="rect">
        <area class="cell"  coords="329,354,401,428" shape="rect">
        <area class="cell"   coords="270,351,322,428" shape="rect">
        <area class="cell"  coords="160,354,220,425" shape="rect">
        <area class="cell"  coords="242,274,331,323" shape="rect">
        <area class="cell"   coords="333,273,422,323" shape="rect">
        <area class="cell" coords="427,277,515,325" shape="rect">
        <area class="cell"  coords="518,273,607,323" shape="rect">
        <area class="cell" coords="172,190,247,250" shape="rect">
        <area class="cell"  coords="173,88,247,138" shape="rect">
        <area class="cell" coords="299,88,376,141" shape="rect">
        <area class="cell"  coords="299,188,371,251" shape="rect">
 </map>

在我的jquery中,我尝试了:

if(condition){
    $("#Map area").eq(cells[i][1]).focus().focus();
    //$(".mapify-svg polygon").eq(cells[i][1]).css("fill","rgba(144, 228, 144, 0.3)");//green
}else{
    $("#Map area").eq(cells[i][1]).focus().focus();
    $(".mapify-svg polygon").eq(cells[i][1]).css("fill","rgba(218, 21, 21, 0.48)");//red
}

0 个答案:

没有答案