Нажмите на изображение не работает

Question

По некоторым причинам я не могу нажать на это изображение, чтобы показать FancyBox, если у меня есть «OnMouseOver» в качестве параметра:

<area onmouseover="toggleOverlay('SteWoz',1);" id="locSteWoz" alt="Test" class="fancybox" coords="24,51,236,244" href="http://www.google.com" rel="iframe" shape="rect" title="Test"> 

EDIT: Это то, что делает toggleOverlay:

<script> 
    function toggleOverlay(name, newState){ 
     var element = 'imgOverlay' + name; 
     var newDisplay 

     if (newState == 0) {newDisplay = 'none'} 
     if (newState == 1) {newDisplay = 'block'}   

     document.getElementById(element).style.display = newDisplay; 
     //document.getElementById(element).style.z-index = '5'; 

      $(element).hide().fadeIn(4000); 
    } 
</script> 

Если я удаляю «onmouseover», он отлично работает. Как я могу это исправить?

Джеймс

Answer 1

Первый, эта линия:

$(element).hide().fadeIn(4000); 

... на самом деле не делать ничего, потому что в этот момент element еще нужен правильный знак (либо # или .), чтобы определить селектор, поэтому в этом случае должно быть:

$("#" + element).hide().fadeIn(1000); 

Второй, если вы накладывая другое изображение над изображением, которое использует изображение map, что я предполагаю, что вы делаете, как в этом JSFIDDLE,

... то нет ничего, что вы можете сделать, чтобы "сделайте накладку не отреагируйте на какие-либо клики, чтобы можно было щелкнуть нижеприведенное изображение. ".

Что вы могли бы сделать, однако, чтобы сделать наложения изображение использовать один и тот же образ map, как на картинке ниже, так, в пределах вашей toggleOverlay() функции, вы можете настроить эту строку

$("#" + element).hide().fadeIn(1000); 

... в этом

$("#" + element).hide().fadeIn(1000).attr("usemap", "#Map"); 

... если предположить, что ваш HTML выглядит

<map name="Map" id="Map"> 
    <area onmouseover="toggleOverlay('SteWoz',1);" id="locSteWoz" class="fancybox" shape="square" coords="0,0,415,319" href="{target}" title="title" alt="alt" /> 
</map> 

... в противном случае используйте соответствующий идентификатор тега map.

См updated JSFIDDLE