1
아래 코드를 참조하십시오. 드롭 다운 옵션에서 선택한 영역을 강조 표시해야합니다. 내가 드롭 다운을 변경하면변경 드롭 다운에서 영역 좌표를 강조 표시해야합니다.
<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를 위해 노력했지만 둘 다 작동하지 않는다. 제가 어떻게하는지 알려주세요.
당신은 어떤 JS lib 디렉토리를 사용 했습니까? 아니, 시도해이 https://www.npmjs.com/package/dynamic-imagemap –
이봐, 당신은 엄마에게 이미지를 줄 수 있습니까? 'images/plot_map.png' –
@WilliamValhakis 화면을 확인하십시오 https://prnt.sc/htb4qt –