Получение мерцания от прозрачного PNG, используемого в качестве наведения мыши - PullRequest
Новая
       0

Получение мерцания от прозрачного PNG, используемого в качестве наведения мыши

2 голосов
/ 10 июня 2011

Я немного поковырялся в этом, но не смог найти именно то, что я пытаюсь сделать здесь. В основном у меня есть карта изображения, где я хотел, чтобы скрытые слои появлялись поверх изображения при наведении курсора. Существует 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>

Большое спасибо!

Ответы [ 2 ]

1 голос
/ 10 июня 2011

Поскольку вы не упомянули, для каких элементов вы добавили обработчики событий mouseover и mouseout, я предполагаю, что вы вызываете showContent, чтобы показать png, когда мышь перемещается над div и вы вызываете hideContent для скрыть png, когда мышь находится над png.

Если это то, что происходит, то причина мерцания:

При наведении мыши на элемент div, над элементом div отображается png. Поэтому мышь теперь находится над png, из-за чего происходит событие mouseover для png, которое скрывает его. Теперь мышь находится над div, поэтому событие mouseover вызывается по div, из-за чего отображается png. Это будет продолжаться.

Решения: 1. Поместите png (при показе) немного дальше от мыши, чтобы png не находился непосредственно под курсором мыши. 2. Или удалите обработчик события mouseover из png и добавьте обработчик mouseout в div, чтобы скрыть png.

0 голосов
/ 09 августа 2013

Я исправил свою проблему, когда добавил .show к всплывающему элементу.Браузер запутался, когда моя мышь переключалась с одного элемента на другой. 

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

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