Image Map 기능이 SOMETHING에 의해 nixed 됨

Question

나는 친구를위한 사이트를 설계하고 있으며 거의 ​​완료되었지만, 어떤 이유로 내 이미지 맵 참조가 무언가에 의해 불량화되고있다. 나는 높고 낮게 보았고, jQuery, CSS, JS 스크립트에 대한 참조를 가져 왔고, 왜 작동하지 않을지에 관해서는 잘 알고 있습니다. 그것은 http://www.toddwhittle.com/jp입니다. '고객'을 클릭하고 오른쪽 스크롤 막대를 사용하여 '프로모션/광고/정치'가 표시된 곳으로 이동하면 이미지가 고객 목록 위에 나타납니다. 새 창에 몇 개의 YouTube 링크가 표시됩니다. 그러나 기쁨은 없습니다. 누군가 도와 주실 수 있습니까? 사전에

감사합니다, TW

Answer 1

이미지 맵은 맵 결합 된 이미지가 상위 계층이 아니기 때문에 거의 예외없이 작동하지 않습니다.

<dl class="folio"> 
    <dt></dt> 
    <dd class="dt"> 
     <div id="img1" style="opacity:0;"> ... </div> 
     <div id="img2" style="opacity:0;"> ... </div> 
     ... 
     <div id="img8" class="active"> ... </div>    
     <div id="img9" style="opacity:0;"> ... </div> 
    </dd> 
</dl> 

이미지 맵은 "활성"하나에 :

여기 레이아웃입니다. 이 모든 것들은 CSS에서 나온 position: absolute이며 다른 하나의 위에 겹쳐서 있습니다.

opacity: 0을 설정해도 브라우저가 무언가를 무시하지 않습니다. 단지 투명하게 만듭니다. 따라서 이미지 맵은 나중에 렌더링되는 img9 아래에 있습니다.

쉬운 솔루션은 opacity: 0 대신 display: none을 사용하여 비활성 레이어를 숨기는 것입니다. 또는 활성 레이어에서 z-index: 10 (또는 사용중인 다른 것보다 더 높은 값)을 설정하여 맨 위에 놓을 수 있습니다.