Chrome의 이미지지도 : 이벤트가 실행되지 않습니다. IE7에서 잘 작동합니다.

Question

매핑 된 영역 집합이있는 이미지가 있습니다. 각 영역을 클릭하면 무언가를 수행하는 함수가 호출됩니다. 이 모든 시련은 IE7에서 훌륭하게 작동합니다! 한 번, 나를 괴롭히는 것은 Chrome입니다. Chrome은이 영역에서 어떤 이벤트도 발생시키지 않으며 문제를 정확히 알 수 없습니다. 여기에 관련 코드입니다 : 내가지도 영역이 거대한 목록을 barraging 좋아하지 않아

<div id="containerRemote"> 
<img src="resources/buttons/RC64_small.png" width="170" height="590" 
alt="" usemap="#remotemap" /> 
<map id="remotemap" name="remotemap"> 
    <area shape="circle" coords="37,47.5,12" alt="TV Input" /> 
    <area shape="circle" id="format" coords="37,78.5,12.5" alt="Format" /> 
    <area shape="circle" coords="85.5,60.5,13" alt="Power" /> 
    <area shape="circle" id="poweron" coords="140.5,50.5,12.5" alt="DTV Power On" /> 
    <area shape="circle" id="poweroff" coords="140.5,79.5,12" alt="DTV Power Off" /> 
    <area shape="circle" id="play" coords="87.5,134,17" alt="Play" /> 
    <area shape="circle" id="stop" coords="87.5,95.5,13" alt="Stop" /> 
    <area shape="circle" id="rewind" coords="43,134,14" alt="Rewind" /> 
    <area shape="circle" id="fastforward" coords="133.5,134,14" alt="Fast Forward" /> 
    <area shape="circle" id="pause" coords="61.5,164.5,13" alt="Pause" /> 
    <area shape="circle" id="record" coords="116,162.5,13" alt="Record" /> 
    <area shape="circle" id="replay" coords="61.5,101.5,13" alt="Replay" /> 
    <area shape="circle" id="advance" coords="116,105,13" alt="Advance" /> 
    <area shape="circle" id="guide" coords="40.5,205.5,15" alt="Guide" /> 
    <area shape="circle" id="active" coords="68.5,187.5,17" alt="Active" /> 
    <area shape="circle" id="list" coords="106.5,187.5,14" alt="List" /> 
    <area shape="circle" id="exit" coords="133.5,209,15" alt="Exit" /> 
    <area shape="circle" id="select" coords="89,243.5,18" alt="Select" /> 
    <area shape="circle" id="up" coords="89,209,12.5" alt="Up" /> 
    <area shape="circle" id="up2" coords="73.5,211.5,12.5" alt="Up" /> 
    <area shape="circle" id="up3" coords="104.5,211.5,12.5" alt="Up" /> 
    <area shape="circle" id="down" coords="89,279,12.5" alt="Down" /> 
    <area shape="circle" id="down2" coords="73.5,271.5,12.5" alt="Down" /> 
    <area shape="circle" id="down3" coords="104.5,271.5,12.5" alt="Down" /> 
    <area shape="circle" id="left" coords="53.5,243.5,12.5" alt="Left" /> 
    <area shape="circle" id="left2" coords="56,224.5,12.5" alt="Left" /> 
    <area shape="circle" id="left3" coords="53.5,257,12.5" alt="Left" /> 
    <area shape="circle" id="right" coords="122.5,243.5,12.5" alt="Right" /> 
    <area shape="circle" id="right2" coords="121,224.5,12.5" alt="Right" /> 
    <area shape="circle" id="right3" coords="119.5,257,12.5" alt="Right" /> 
    <area shape="circle" id="back" coords="40.5,288,15" alt="Back" /> 
    <area shape="circle" id="menu" coords="86.5,305,17" alt="Menu" /> 
    <area shape="circle" id="info" coords="133.5,290,15" alt="Info" /> 
    <area shape="circle" id="red" coords="45,320,12" alt="Red" /> 
    <area shape="circle" id="green" coords="70.5,334.5,12" alt="Green" /> 
    <area shape="circle" id="yellow" coords="100,334.5,12" alt="Yellow" /> 
    <area shape="circle" id="blue" coords="125,320,12" alt="Blue" /> 
    <area shape="circle" coords="47,356,15" alt="Volume Plus" /> 
    <area shape="circle" coords="51,399.5,14" alt="Volume Minus" /> 
    <area shape="circle" coords="49,428.5,12" alt="Mute" /> 
    <area shape="circle" id="channelup" coords="130.5, 356.5,15" alt="Channel Plus" /> 
    <area shape="circle" id="channeldown" coords="127.5,399,14" alt="Channel Minus" /> 
    <area shape="circle" id="previous" coords="126.5,428.5,12" alt="Previous Channel" /> 
    <area shape="circle" id="one" coords="49,456.5,12" alt="One" /> 
    <area shape="circle" id="two" coords="87.5,456.5,12" alt="Two" /> 
    <area shape="circle" id="three" coords="125,456.5,12" alt="Three" /> 
    <area shape="circle" id="four" coords="49,486.5,12" alt="Four" /> 
    <area shape="circle" id="five" coords="87.5,486.5,12" alt="Five" /> 
    <area shape="circle" id="six" coords="125,486.5,12" alt="Six" /> 
    <area shape="circle" id="seven" coords="49,513.5,12" alt="Seven" /> 
    <area shape="circle" id="eight" coords="87.5,513.5,12" alt="Eight" /> 
    <area shape="circle" id="nine" coords="125,513.5,12" alt="Nine" /> 
    <area shape="circle" id="dash" coords="49,539.5,12" alt="Dash" /> 
    <area shape="circle" id="zero" coords="87.5,539.5,12" alt="Zero" /> 
    <area shape="circle" id="enter" coords="125,539.5,12" alt="Enter" /> 
</map> 
</div> 

는하지만, 내가 부족지도 내에서 일부 오류가있을 가능성이 있습니다. 다음은이 영역에서 onclick 이벤트에 대한 함수 호출을 바인딩하는 JS입니다. 아래는 또한 각 영역 매핑에 href 속성을 할당하는 JQuery 코드 조각입니다.

$("#remotemap area").click(function() { 
    if($(this).attr("id") != undefined) { 
     logRCCommand($(this).attr("id")); 
    } 
    return false; 
}); 

    $("#remotemap area").attr("href", "javascript: void(0);"); 

CSS : 흥미롭게도

#containerRemote{ 
position: absolute; /* this line, when commented, fixes the problem, but ruins layout   */ 
width: 170px; 
} 

, 크기가 잘못이지만, 잘 작동 세 가지 영역이 이미지의 맨 아래에. 이것은 구문 또는 논리 오류와는 달리 형식화 오류가 있다고 생각합니다. 아직도, 나는 이것이 무엇을 일으키는 지 알지 못합니다. 나는 단서를 찾기 위해 인터넷을 샅샅이 뒤졌지만 아무 소용이 없었다!

감사

업데이트 :이 문제는 CSS와 함께 할 수있는 뭔가가 생각합니다. 이 맵이 포함 된 div에 대한 특정 CSS 행을 주석 처리했습니다. 빌라! 모든 것이 잘 작동하지만 이제는 전체 페이지의 레이아웃이 지옥으로 넘어갔습니다. 이 질문이 새로운 질문인지 아니면 현재 질문의 업데이트인지 나는 알지 못합니다. 어쨌든 더 많은 관련 선을 포함하도록 코드를 업데이트했습니다.

Answer 1

감사를 HREF 속성을 추가 할 필요가, 내 이미지 맵에 별도의 사업부 인접 내가 생각했던 것보다 더 넓은 것을 알아낼 수 있었고, 그 부분 (내용이 보이지 않는 부분)은 내 이미지 맵을 덮어서 div로 덮히지 않은 작은 부분을 제외하고는 실제로 사용할 수 없게 만들었습니다. 다른 사업부가 너무 넓게 온 방법

내가 이해하지 못하는,하지만 난 시간이 날 때 나중에 알아 내기위한 무언가이다 : P

어쨌든을, 나는 div의 Z- 색인을 변경 내 이미지지도가 포함 된 이미지

#containerRemote { 
    position: absolute; 
    width: 170px; 
    z-index: 11; 
} 

모든 것이 이제는 잘 작동합니다! 내 문제는 Chrome이 이벤트를 실행하지 않는 것이 아니라 Chrome의 콘텐츠 레이아웃과 IE7 레이아웃 간의 차이입니다.

도움을 주신 모든 분들께 감사드립니다.

Answer 2

당신은 로돌포의 의견에 지역의 모든 요소에

<area shape="circle" coords="37,47.5,12" alt="TV Input" href="#" />