HTML지도와 영역이 보이지 않음

Question

나는 그림 위에지도를 놓아서 클릭 할 수있게하려고 노력했지만 그 지역은 작동하지 않습니다. 크롬 개발자 도구를 사용하여 페이지를 검사 할 때 0x0 영역으로 표시됩니다. 여기에 코드가 있습니다.

내가 클릭 할 수하고자하는 섹션

<div class="col-sm-12 col-xs-12"> 
 
    <img class="img-responsive envia" src="assets/envviar.png" usemap="#Map" > 
 
    <map name="Map" id="Map"> 
 
    <area shape="rect" coords="200,200,200,200" href="#" alt="aqui"> 
 
    </map> \t 
 
</div>

그것은 "가는데"를 말한다된다.

내가 IE와 같은 일부 브라우저에서 필요한 몇 가지 권장 사항을 보았 기 때문에 ID를 추가했습니다. 감사. 귀하의 coords

Answer 1

이 잘못되었습니다 :

<div class="col-sm-12 col-xs-12"> 
 
    <img class="img-responsive envia" src="https://i.stack.imgur.com/FRpHw.png" usemap="#Map" > 
 
    <map name="Map" id="Map"> 
 
    <area shape="rect" coords="530,248,575,270" href="#" alt="aqui" /> 
 
    </map> \t 
 
</div>

This online tool가 쉽게 areas에 대한 coords을 생성 할 것이다.

좌표가 작동하지 않는 이유는 4 점 모두에 대해 동일한 좌표를 설정했기 때문입니다. 즉, 면적에 크기가 없기 때문입니다. rect area의 경우 4 좌표는 왼쪽 위 모퉁이와 오른쪽 하단 모서리의 가로/세로 위치이므로 서로 다른 값이 필요합니다.

Answer 2

이미지 맵을 작동 시키려면 이미지의 크기를 정의해야합니다. 즉, 응답 성이 떨어질 수 있습니다. 플러그인을 보면서 자신이 원하는 방식대로 작동하는 것이 좋습니다. Chrome 개발자 도구는 위치 정보를 표시하지 않지만 마우스를 가리키면 표시됩니다.

당신이 찾고있는 반응 형 디자인을 얻으려면 https://github.com/stowball/jQuery-rwdImageMaps을 제안 할 것입니다.

투표 결과가 투표에 걸렸습니까? 하지만 나는 맞습니다. 그래서 당신이 상관없이 내 답변을 좋아하지 않습니다.