앵커 태그의 핫스팟 속성이 Chrome에서 작동하지 않습니다.

그래서 웹 사이트에서 일종의지도를 만들었습니다. 지도에있는 도시 위로 마우스를 가져 가면 핫스팟 영역을 가로 질러 팝 상자를 표시하고 해당 도시에있는 팀에 대한 정보를 제공 할 수 있습니다. 파이어 폭스에서는 훌륭하게 작동하지만 Chrome에서는 앵커 태그의 속성에 의해 생성 된 핫스팟을 감지하지 못하는 것 같습니다. 앵커 태그의 핫스팟 속성이 Chrome에서 작동하지 않습니다.

팝업 상자

은 HTML 인덱스 내에서 정의

<div id="pop1" class="popbox"> 
    <h2>Youth Academy Bucuresti</h2> 
    <p>Membri:</p> 
</div> 
[...] more pop boxes [...]

<img src="images/first_try.png" usemap="#yaro" style="margin-bottom: 100px;"> 
<map name="yaro"> 
    <a shape="rect" coords="355,375,425,403" href="#" class="popper" data-popbox="pop1"></a> 
[...] more anchor tags [..] 
</map>

크롬을 사용하여 웹 사이트를 탐색하는 동안 왜 어떤 아이디어가, 핫스팟이 검출되지 않은지도? "모양", "좌표"속성이 아직 HTML5에서 공식적으로 지원되지 않았기 때문일 수 있습니까? 파이어 폭스에서 보이는 방법

: http://imgur.com/wi3wdYJ는 a의

출처

2014-08-28 Laurentiu Diaconu

사용 area 태그 intead (내 커서가 도시 암츠 이상이었다).

나 "영역"태그로 전에 시도 http://codepen.io/elliz/pen/FgeqE

<h2>Test with `area` tags</h2> 

<img usemap="#area" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABaAQMAAAAFCM8RAAAABlBMVEX/DAD/45HIkMgSAAAAIklEQVR4XmMYsmAU1P8HgwPMEPrf8BQcFRwVHBUcqmAUAACXrqnfUify7gAAAABJRU5ErkJggg=="/> 

<map name="area" id="area"> 
    <area shape="rect" title="Left box" href="#" coords="17,21,73,68" /> 
    <area shape="rect" title="right box" href="#" coords="86,21,142,68" /> 
</map>

출처

2014-08-28 11:01:18 Ruskin

HTML5에서는 'coords'및 'shape'속성이 더 이상 사용되지 않습니다. 파이어 폭스가 아직도 그들을 사용하는 이유는 모르겠지만 크롬은 그렇지 않다. –

모바일 장치의 이미지 맵에 문제가있을 수 있으므로 배치 된 'a' 태그를 사용하는 것이 좋겠지 만 ... 어떻게 페이지가 매우 좁아 질 수 있습니까? 루마니아지도보다는 목록을 선호 하시겠습니까? – Ruskin

을 위해 작동하는 것 같다,하지만 난 자바 스크립트 파일 팝업에서 뭔가를 변경하는 것을 잊었다 원인은 '작동되지 않았습니다. 이제 괜찮습니다. 좁은 데스크톱의 웹 사이트에 대해서는 목록이 괜찮은 것처럼 보이지만 오랫동안 이런 종류의 표현을 원했기 때문에 조직의 다른 구성원이 생각하는 것을 볼 수 있습니다 (루마니아의지도 조직과 관련된 도시).

출처

2014-08-28 13:09:09

앵커 태그의 핫스팟 속성이 Chrome에서 작동하지 않습니다.

답변

관련 문제