반응 이미지 맵

Question

안녕하세요 이미지 맵의 HTML 코드가 있습니다. 이미지의 일부가 클릭됩니다. 하지만 화면 크기가 변경되면 CSS 덕분에 이미지가 축소되지만 이미지 좌표는 동일하게 유지됩니다. 응답하는 이미지 맵을 만들 수있는 방법이 없으므로 화면 크기가 변경되면 이미지 맵도 변경됩니다. jquery 제발. 이것은 내가 현재 사용하는 코드입니다.

HTML 
<div class="Wrapper2"> 
    <div class="Title-Context-Box"> 
        <img src="ResturantPic/img1.jpg" alt="" width="98%" height="690" usemap="#Map" /> 
         <map name="Map" id="Map"> 
          <area alt="" title="Table1" onclick="alert('You are clicking on 2');" shape="poly" coords="10,466,56,450,27,446,0,455" /> 
          <area alt="" title="Table2" onclick="alert('You are clicking on 2');" shape="poly" coords="42,436,88,441,116,431,75,427" /> 
          <area alt="" title="Table3" onclick="alert('You are clicking on 2');" shape="poly" coords="99,424,127,428,156,420,129,414" /> 
          <area alt="" title="Table4" onclick="alert('You are clicking on 2');" shape="poly" coords="170,411,179,411,186,409,196,408,203,405,199,402,193,397,180,398,170,398,164,401,163,410" /> 
          <area alt="" title="Table5" onclick="alert('You are clicking on 2');" shape="poly" coords="253,425,215,422,222,407,253,407" /> 
          <area alt="" title="Table6" onclick="alert('You are clicking on 2');" shape="poly" coords="148,457,126,467,115,488,127,501,145,507,171,507,188,498,218,492,237,476,239,455,229,446,203,441,179,439,152,440,137,446,130,455" /> 
          <area alt="" title="Table7" onclick="alert('You are clicking on 2');" shape="poly" coords="339,399,340,412,371,413,367,393" /> 
          <area alt="" title="Table8" onclick="alert('You are clicking on 2');" shape="poly" coords="346,442,351,459,398,460,398,446" /> 
          <area alt="" title="Table9" onclick="alert('You are clicking on 2');" shape="poly" coords="348,466,350,502,438,501,415,463" /> 
          <area alt="" title="Table10" onclick="alert('You are clicking on 2');" shape="poly" coords="492,445,520,464,575,462,544,436" /> 
          <area alt="" title="Table11" onclick="alert('You are clicking on 2');" shape="poly" coords="572,431,622,451,656,439,597,414" /> 
          <area alt="" title="Table12" onclick="alert('You are clicking on 2');" shape="poly" coords="533,465,560,513,657,498,608,465" /> 
         </map> 
        <br> 
    </div> 
</div> 

CSS 

.Wrapper2 {  /* My Wrapper CSS*/ 
    background-color: #FFFFFF; 
    height: auto; 
    width: 55%; 
    border: thin solid #000000; 
    align-content:center; 
    border-radius: 10px; 
    background-color: #000000; 
} 

.Title-Context-Box {  /* My Title Text Styling Content Box CSS*/ 
    font-family:Century Gothic; 
    font-size: 26px; 
    font-weight: normal; 
    text-align: center; 
    color: #000000; 
    background-color: #FFFFFF; 
    height: auto; 
    width: 98%; 
    margin-bottom: 1%; 
    margin-right: 1%; 
    margin-left: 1%; 
    margin-top: 1%; 
    border-radius: 10px; 
} 

Answer 1

현재 원하는 작업을 수행하는 데 필요한 html 코드가 없습니다. css를 사용하여 이미지의 크기를 조정하면 좌표가 더 이상 정렬되지 않습니다. 이는 이미지 맵의 한 가지 제한 사항입니다.

CSS 스프라이트를 사용해 보거나 동적 자바 스크립트를 사용하여 이미지 맵을 만들 수도 있습니다.