마우스 오버 이미지로 사용되는 투명 PNG에서 깜박임 받기

Question

나는이 문제를 조금 파고 들었지만 여기에서하려고하는 정확한 것을 찾을 수 없었습니다. 기본적으로 나는 마우스 오버시 이미지 상단에 숨겨진 레이어를 표시하고 싶은 이미지 맵을 가지고 있습니다. 5 개의 다른 핫스팟과 5 개의 서로 다른 숨겨진 레이어가 해당 핫스팟을 마우스 오버 할 때 표시됩니다.

문제는 이것입니다. 상단의 숨겨진 레이어 각각에는 투명 비트가 포함 된 PNG가 포함되어 있으며 PNG는 사용자의 마우스가있는 곳과 거의 동일하게 나타납니다. 마우스 오버로 호출하면 PNG가 빠르게 깜박입니다 ... 투명성으로 인해 페이지가 마우스의 위 또는 아래에 있는지 여부를 결정하는 데 문제가있는 것으로 추정됩니다 ...?

누구나 똑똑한 해결책이 있습니까?

<script type="text/javascript" language="JavaScript"> 
<!-- 
function HideContent(d) { 
if(d.length < 1) { return; } 
document.getElementById(d).style.display = "none"; 
} 
function ShowContent(d) { 
if(d.length < 1) { return; } 
document.getElementById(d).style.display = "block"; 
} 
function ReverseContentDisplay(d) { 
if(d.length < 1) { return; } 
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; } 
else { document.getElementById(d).style.display = "none"; } 
} 
//--> 
</script> 

를 그리고이 페이지의 본문에 : :

나는 머리에이있어

<div id="homeowners" 
    style="display:none; 
     position:absolute; 
     left:0px; 
     top:39px; 
     padding: 5px; 
     z-index:10;"> 
<img src="<?php bloginfo('template_directory'); ?>/images/homeowners-over.png" width="257" height="107" alt="Homeowners" /></div> 
<div id="dealers" 
    style="display:none; 
     position:absolute; 
     left:319px; 
     top:39px; 
     padding: 5px; 
     z-index:10;"> 
<img src="<?php bloginfo('template_directory'); ?>/images/dealers-over.png" width="257" height="107" alt="Dealers" /></div> 
<div id="commercial" 
    style="display:none; 
     position:absolute; 
     left:0px; 
     top:509px; 
     padding: 5px; 
     z-index:10;"> 
<img src="<?php bloginfo('template_directory'); ?>/images/commercial-over.png" width="257" height="107" alt="Commercial" /></div> 
<div id="importers" 
    style="display:none; 
     position:absolute; 
     left:319px; 
     top:509px; 
     padding: 5px; 
     z-index:10;"> 
<img src="<?php bloginfo('template_directory'); ?>/images/importers-over.png" width="257" height="107" alt="Importers" /></div> 
<img src="<?php bloginfo('template_directory'); ?>/images/aww_home.jpg" width="586" height="638" border="0" usemap="#Map" /> 
    <map name="Map" id="Map"> 
     <area shape="poly" coords="3,4,293,4,293,25,4,313" href="#" 
    onmouseover="ShowContent('homeowners'); return true;" 
    href="javascript:ShowContent('homeowners')" 
    onmouseout="HideContent('homeowners'); return true;" 
    href="javascript:HideContent('homeowners')"> 
     <area shape="poly" coords="296,5,583,4,584,312,296,27" href="#" 
    onmouseover="ShowContent('dealers'); return true;" 
    href="javascript:ShowContent('dealers')" 
    onmouseout="HideContent('dealers'); return true;" 
    href="javascript:HideContent('dealers')"> 
     <area shape="poly" coords="294,32,8,317,295,603,575,318" href="#" /> 
     <area shape="poly" coords="5,322,4,633,294,634,294,608" href="#" 
    onmouseover="ShowContent('commercial'); return true;" 
    href="javascript:ShowContent('commercial')" 
    onmouseout="HideContent('commercial'); return true;" 
    href="javascript:HideContent('commercial')"> 
     <area shape="poly" coords="299,607,299,634,582,634,580,325" href="#" 
    onmouseover="ShowContent('importers'); return true;" 
    href="javascript:ShowContent('importers')" 
    onmouseout="HideContent('importers'); return true;" 
    href="javascript:HideContent('importers')"> 
    </map> 

많은 감사합니다!

Answer 1

mouseover 및 mouseout 이벤트 처리기를 추가 한 요소에 대해 언급하지 않았기 때문에 showContent을 호출하면 div 위로 마우스를 이동 한 후 png를 표시하고 hideContent을 호출하면 png를 숨길 것이라고 가정합니다. 마우스가 PNG 위에있을 때.

무슨 일이이면 깜박임에 대한 이유는 다음과 같습니다

마우스 사업부 위로 이동

의 PNG는 사업부에 걸쳐 표시됩니다. 그러므로 mouseover가 mouseover 이벤트가 숨어있는 png로 인해 png를 넘었습니다. 이제 마우스가 div 위에 있으므로 mouseover 이벤트가 png가 표시되는 div에서 시작됩니다. 이것은 계속 될 것입니다.

해결 방법 : 1. png가 마우스 커서 바로 아래에 있지 않도록 마우스를 조금 더 멀리 올려 놓습니다. 2. 또는 mouseover 이벤트 핸들러를 png에서 제거하고 mouseout 핸들러를 div에 추가하여 png를 숨 깁니다.

Answer 2

필자가 팝업 한 요소에 .show를 추가했을 때 문제가 해결되었습니다. 마우스가 한 요소에서 다른 요소로 전환 될 때 브라우저가 혼란스러워졌습니다.

$(function() { 
    $('.parent_div').hover(function() { 
     $('.show_popup').show(); 
    }, function() { 
     $('.show_popup').hide(); 
    }); 
}); 

$(function() { 
    $('.show_popup').hover(function() { 
     $('.show_popup').show(); 
    }); 
});