変更のドロップダウンで領域座標を強調表示する必要があります

Question

以下のコードをご覧ください。ドロップダウンオプションで選択した領域を強調表示する必要があります。

<select name="hightlight" multiple> 
<option value="20">20</option> 
<option value="21">21</option> 
<option value="22">22</option> 
<option value="23">23</option> 
<option value="24">24</option> 
<option value="25">25</option> 
<option value="26">26</option> 
<option value="27">27</option> 
<option value="28">28</option> 
<option value="29">29</option> 
<option value="30">30</option> 
</select> 



<div class="inner-profile-map1"> 
           <img src="images/plot_map.png" alt="" usemap="#Map">       
          </div> 
          <map name="Map"> 
           <area class="area1 thumbLink area_21" shape="poly" coords="115,315,64,270,103,229,151,273"> 
           <area class="area2 thumbLink area_22" shape="poly" coords="155,269,106,225,142,185,191,230"> 
           <area class="area3 thumbLink area_21" shape="poly" coords="147,182,182,144,231,187,194,227"> 
           <area class="area4 thumbLink area_23" shape="poly" coords="185,140,241,77,267,137,274,145,236,183" > 
           <area class="area5 thumbLink area_20" shape="poly" coords="278,143,270,134,246,75,253,66,315,62,319,131,302,131"> 
           <area class="area6 thumbLink area_20" shape="poly" coords="325,129,320,63,368,60,370,126"> 
           <area class="area7 thumbLink area_20" shape="poly" coords="375,127,374,60,445,56,422,131,406,127"> 
           <area class="area8 thumbLink area_22" shape="poly" coords="446,149,497,95,537,131,487,186"> 
           <area class="area9 thumbLink area_23" shape="poly" coords="490,189,540,134,579,168,527,225"> 
           <area class="area10 thumbLink area_23" shape="poly" coords="531,227,582,172,620,207,569,263"> 
           <area class="area11 thumbLink area_28" shape="poly" coords="573,266,624,210,663,246,611,300"> 
           <area class="area12 thumbLink area_29" shape="poly" coords="616,304,666,249,704,284,653,338"> 
           <area class="area13 thumbLink area_29" shape="poly" coords="657,343,709,288,747,323,697,378"> 
           <area class="area14 thumbLink area_27" shape="poly" coords="702,382,752,327,790,361,740,417"> 
           <area class="area15 thumbLink area_27" shape="poly" coords="743,420,794,365,831,400,782,456"> 
           <area class="area16 thumbLink area_23" shape="poly" coords="787,460,838,404,876,442,829,498"> 
           <area class="area17 thumbLink area_23" shape="poly" coords="766,480,807,518,768,564,727,525"> 
           <area class="area18 thumbLink area_20" shape="poly" coords="724,441,763,476,723,520,684,486"> 
           <area class="area19 thumbLink area_20" shape="poly" coords="680,402,719,438,680,481,642,445"> 
           <area class="area20 thumbLink area_20" shape="poly" coords="638,363,677,397,637,441,600,406"> 
           <area class="area21 thumbLink area_25" shape="poly" coords="594,323,635,360,595,403,557,367"> 
           <area class="area22 thumbLink area_25" shape="poly" coords="219,256,256,217,299,255,263,296"> 
           <area class="area23 thumbLink area_24" shape="poly" coords="183,299,217,260,258,300,224,335"> 
           <area class="area24 thumbLink area_26" shape="poly" coords="143,340,180,302,221,341,186,379"> 
          </map> 
         </div> 

私がドロップダウンを変更するとき、私はそのエリアのクラスに一致するエリアを強調表示する必要があります。私はCSSとJQueryのためにやろうとしましたが、どちらもうまくいきません。どうすればいいのか教えてください。

Answer 1

window.addEventListener('load', function() { 
 
    /* GET FIRST IMAGE TAG AND SOME CSS TO IT */ 
 
    var img = document.querySelector('img'); 
 
    img.style.position = 'absolute'; 
 
    img.style.display = 'block'; 
 
    img.style.border = '1px solid red'; 
 

 
    /* CANVAS ELEMENT CREATION, AND SOME CSS */ 
 
    var canvas = document.createElement('canvas'); 
 
    canvas.style.border = '1px solid blue'; 
 
    canvas.style.position = 'absolute'; 
 
    canvas.style.pointerEvents = 'none'; 
 
    canvas.width = img.clientWidth; 
 
    canvas.height = img.clientHeight; 
 

 
    /* INSERTES 'canvas' TO '.inner-profile-map1' */ 
 
    var wrap = document.querySelector('.inner-profile-map1'); 
 
    wrap.appendChild(canvas); 
 

 
    /* GETS THE CANVAS CONTEXT */ 
 
    var ctx = canvas.getContext('2d'); 
 

 
    var select = document.body.querySelector('select'); 
 

 
    /* ADDS BACKGROUND COLOR TO EACH OPTION */ 
 
    select.querySelectorAll('option').forEach(function(option) { 
 
    option.style.backgroundColor = option.getAttribute('data-color'); 
 
    }); 
 

 
    /* LISTENS FOR SELECT CHANGE */ 
 
    select.addEventListener('change', function(event) { 
 
    /* CLEARS WHOLE CANVAS */ 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 

 
    /* GET ALL SELECTED OPTIONS */ 
 
    var options = this.querySelectorAll('option:checked'); 
 

 
    /* FOR EACH OPTION GET COORDINATES, DATA-COLOR AND DRAW COORDINATES */ 
 
    options.forEach(function(option) { 
 
     /* FINDS ALL AREAS ASSOCIATED WITH OPTION */ 
 
     var areas = document.body.querySelectorAll(`.area_${option.value}`); 
 
     var color = option.getAttribute('data-color') || 'rgba(255, 255, 255, 0.5)'; 
 

 
     /* DRAW EACH AREA COORDINATES */ 
 
     areas.forEach(function(area) { 
 
     var coords = area.getAttribute('coords').split(','); 
 

 
     /* DRAW THE AREA COORDINATES */ 
 
     ctx.beginPath(); 
 
     ctx.moveTo(coords[0], coords[1]); 
 
     for (var n=2; n<coords.length; n+=2) { 
 
      ctx.lineTo(coords[n], coords[n+1]); 
 
     } 
 
     ctx.lineTo(coords[0], coords[1]); 
 
     ctx.fillStyle = color; 
 
     ctx.stroke(); 
 
     ctx.fill(); 
 
     }); 
 
    }); 
 
    }); 
 
});

<select name="hightlight" multiple> 
 
    <option value="20" data-color="rgba(255, 0, 0, 0.5)">20</option> 
 
    <option value="21" data-color="rgba(255, 0, 255, 0.5)">21</option> 
 
    <option value="22" data-color="rgba(0, 255, 0, 0.5)">22</option> 
 
    <option value="23">23</option> 
 
    <option value="24">24</option> 
 
    <option value="25">25</option> 
 
    <option value="26">26</option> 
 
    <option value="27">27</option> 
 
    <option value="28">28</option> 
 
    <option value="29">29</option> 
 
    <option value="30">30</option> 
 
</select> 
 

 

 

 
<div class="inner-profile-map1"> 
 
    <img src="https://image.prntscr.com/image/5XrJMIp8TPSj3XFyxTY9vA.png" alt="" usemap="#Map">       
 
</div> 
 

 
<map name="Map"> 
 
    <area class="area1 thumbLink area_21" shape="poly" coords="115,315,64,270,103,229,151,273"> 
 
    <area class="area2 thumbLink area_22" shape="poly" coords="155,269,106,225,142,185,191,230"> 
 
    <area class="area3 thumbLink area_21" shape="poly" coords="147,182,182,144,231,187,194,227"> 
 
    <area class="area4 thumbLink area_23" shape="poly" coords="185,140,241,77,267,137,274,145,236,183" > 
 
    <area class="area5 thumbLink area_20" shape="poly" coords="278,143,270,134,246,75,253,66,315,62,319,131,302,131"> 
 
    <area class="area6 thumbLink area_20" shape="poly" coords="325,129,320,63,368,60,370,126"> 
 
    <area class="area7 thumbLink area_20" shape="poly" coords="375,127,374,60,445,56,422,131,406,127"> 
 
    <area class="area8 thumbLink area_22" shape="poly" coords="446,149,497,95,537,131,487,186"> 
 
    <area class="area9 thumbLink area_23" shape="poly" coords="490,189,540,134,579,168,527,225"> 
 
    <area class="area10 thumbLink area_23" shape="poly" coords="531,227,582,172,620,207,569,263"> 
 
    <area class="area11 thumbLink area_28" shape="poly" coords="573,266,624,210,663,246,611,300"> 
 
    <area class="area12 thumbLink area_29" shape="poly" coords="616,304,666,249,704,284,653,338"> 
 
    <area class="area13 thumbLink area_29" shape="poly" coords="657,343,709,288,747,323,697,378"> 
 
    <area class="area14 thumbLink area_27" shape="poly" coords="702,382,752,327,790,361,740,417"> 
 
    <area class="area15 thumbLink area_27" shape="poly" coords="743,420,794,365,831,400,782,456"> 
 
    <area class="area16 thumbLink area_23" shape="poly" coords="787,460,838,404,876,442,829,498"> 
 
    <area class="area17 thumbLink area_23" shape="poly" coords="766,480,807,518,768,564,727,525"> 
 
    <area class="area18 thumbLink area_20" shape="poly" coords="724,441,763,476,723,520,684,486"> 
 
    <area class="area19 thumbLink area_20" shape="poly" coords="680,402,719,438,680,481,642,445"> 
 
    <area class="area20 thumbLink area_20" shape="poly" coords="638,363,677,397,637,441,600,406"> 
 
    <area class="area21 thumbLink area_25" shape="poly" coords="594,323,635,360,595,403,557,367"> 
 
    <area class="area22 thumbLink area_25" shape="poly" coords="219,256,256,217,299,255,263,296"> 
 
    <area class="area23 thumbLink area_24" shape="poly" coords="183,299,217,260,258,300,224,335"> 
 
    <area class="area24 thumbLink area_26" shape="poly" coords="143,340,180,302,221,341,186,379"> 
 
</map> 
 
    </div>