jquery image map hover effect заикание в и из

Question

Я собираю карту США, которая имеет зависание, что мне нужно как-то вызвать. То, как я его построил (и делал это раньше в меньших масштабах без проблем), заключается в том, чтобы вообразить основной образ США, дать каждой области идентификатор, а затем использовать jQuery, чтобы показать/скрыть абсолютно позиционированную верхнюю панель div карта. Каждый div содержит изображение со своей собственной картой, которое, когда мышь, просто отправляет команду show(), чтобы она оставалась положительной.

У меня также есть некоторый jquery, который скрывает все divs на mouseleave. Проблема в том, что эффекты зависания продолжают включаться и выключаться в этом сумасшедшем заикании. Что я делаю не так? Как вы можете видеть, я экспериментировал с различными функциями, включая mouseover, mouseenter и hover.

<div id="mapContainer"> 
    <img name="CAS_hotspot_exporter_v2" border="0" src="CAS_hotspot_exporter_v2.jpg" id="CAS_hotspot_exporter_v2" usemap="#m_CAS_hotspot_exporter_v2" alt="" /> 
    <map name="m_CAS_hotspot_exporter_v2" id="m_CAS_hotspot_exporter_v"> 
     <area shape="poly" coords="76,138,110,147,101,182,138,248,133,258,132,265,105,260,101,248,97,241,87,235,81,233,70,174" alt="california" id="californiaHotspot"/> 
     <area shape="poly" coords="76,137,94,91,100,98,105,102,127,104,149,112,139,124,140,129,133,153" alt="oregon"id="oregonHotspot" /> 
     <area shape="poly" coords="94,89,96,64,109,70,101,78,106,81,112,75,111,60,153,70,145,109,105,100" alt="washington" id="washingtonHotspot" /> 
     <area shape="poly" coords="112,149,103,182,136,243,158,161,112,149" href="#" id="nevadaHotspot"/> 
     <area shape="poly" coords="133,153,181,162,186,132,172,131,161,113,165,101,157,86,159,73,154,72,146,110,152,112,141,125" href="#" id="idahoHotspot" /> 
    </map> 

    <div id="washington"> 
     <img src="state_pngs/washington.png" border="0" usemap="#washingtonMap"> 
     <map name="washingtonMap" id="washingtonMap"> 
      <area id="washingtonActiveArea" shape="poly" coords="105,83,105,82,106,82,106,83,110,81,112,71,112,71,111,72,112,72,111,72,111,71,111,70,112,70,112,71,112,71,113,70,111,68,111,68,111,68,111,68,111,67,112,67,112,68,112,68,113,65,113,64,113,64,112,62,112,61,112,62,112,61,154,72,147,108,121,104,120,105,119,105,119,104,118,104,118,104,113,103,113,103,112,103,112,102,105,102,104,102,101,101,101,94,99,93,98,93,98,91,97,91,97,91,96,91,96,90,94,90,94,85,95,85,94,88,94,89,95,86,95,86,95,86,96,85,96,86,97,86,96,85,94,84,95,82,97,82,96,82,96,81,95,80,95,81,95,81,95,82,96,64,100,67,100,67,106,70,107,70,109,71,109,71,109,71,109,71,109,71,109,72,110,74,108,75,108,75,108,74,106,77,106,77,104,79,106,79,106,79,105,79,104,79,108,76,108,76,110,74,110,74,110,76,109,77,109,78,108,77,108,77,108,78,109,78,108,81,108,81,107,81,108,80,108,80,106,81,107,81,106,82,106,82,106,82,106,81,106,81,107,80,106,80,103,82,104,82,105,83" /> 
     </map> 
    </div> 

    <div id="oregon"> 
     <img src="state_pngs/oregon.png" border="0" usemap="#oregonMap"> 
     <map name="oregonMap" id="oregonMap"> 
      <area id="oregonArea" shape="poly" coords="75,139,76,127,76,127,80,122,81,123,81,122,79,122,90,99,91,99,93,91,95,92,96,91,96,92,98,93,98,93,100,94,100,101,111,102,111,103,112,103,112,103,117,104,117,104,118,104,118,105,146,108,146,110,147,110,148,113,139,128,140,128,141,130,134,155,134,155,75,139" /> 
     </map> 
    </div> 

    <div id="idaho"> 
     <img src="state_pngs/idaho.png" border="0" usemap="#idahoMap"> 
     <map name="idahoMap" id="idahoMap"> 
      <area id="idahoArea" shape="poly" coords="184,164,135,154,142,129,141,127,140,127,149,111,148,109,147,109,154,71,161,73,160,90,168,103,168,103,168,103,166,113,164,114,164,116,166,118,169,116,169,116,171,124,171,125,172,127,173,127,173,127,173,128,174,132,175,133,181,132,181,132,183,132,183,133,183,133,186,133,187,131,189,134,189,134,184,164" /> 
     </map> 
    </div> 

    <div id="california"> 
     <img src="state_pngs/california.png" border="0" usemap="#californiaMap"> 
     <map name="californiaMap" id="californiaMap"> 
      <area id="californiaActiveArea" shape="poly" coords="24,7,58,16,49,51,90,120,84,138,57,136,30,103,17,42,17,23" /> 
     </map> 
    </div> 

    <div id="nevada"> 
     <img src="state_pngs/nevada.png" border="0" usemap="nevadaMap"> 
     <map name="nevadaMap" id="nevadaMap"> 
      <area id="nevadaArea" shape="poly" coords="148,219,144,230,144,230,143,229,140,228,138,240,138,240,137,242,101,183,110,148,160,159,148,219" /> 
     </map> 
    </div> 
</div> 

И мой JQuery:

$(function() { // Equivalent to $(document).ready(function() 
    if (!$.browser.msie && !$.browser.version.substr(0,1)<7) { 
    $("area").mouseleave(function(){ 
    $("#mapContainer div").animate({opacity: 1.0}, 100).fadeOut(); 
    }); 
    } 

    $("#californiaHotspot, #californiaActiveArea").mouseover(function(){ 
    $("#california").show(); 
    }); 

    $("#idahoHotspot, #idahoActiveArea").mouseenter(function(){ 
    $("#idaho").fadeIn(); 
    }); 

    $("#nevadaHotspot, #nevadaActiveArea").mouseenter(function(){ 
    $("#nevada").fadeIn(); 
    }); 
    $("#nevadaActiveArea").mouseleave(function(){ 
    $("#nevada").hide(); 
    }); 

    $("#oregonHotspot, #oregonActiveArea").mouseover(function(){ 
    $("#oregon").fadeIn(); 
    }); 

    $("#washingtonHotspot, #washingtonActiveArea").mouseover(function(){ 
    $("#washington").fadeIn(); 
    }); 
}); 

Answer 1

Я предложил бы использовать технологию вместо .mouseover(), .mouseenter(), .mouseleave() методы JQuery .hover() контролировать отображение/скрытие изображений. Вы можете более надежно управлять методами fadein() и fadeout().

http://api.jquery.com/hover/

Answer 2

Согласовано JQuery парения является хорошей идеей.

Кроме того, я бы рассмотреть следующие вопросы:

• Сделать базовую карту (CAS_hotspot_exporter_v2.jpg) фоновое изображение DIV # mapContainer.
• Используйте прозрачное изображение 1px для карты изображения.
• Установите ширину и высоту так же, как изображение базовой карты.
• Дайте divs, которые затухают (например, #california), z-index -1.

Выполнение всего, что означает, что на поверхности всегда есть прозрачная поверхность, чтобы мышь «зависала», а другие разделители были «под» этой поверхностью. Таким образом, браузер не должен запускать событие mouseleave, когда новый div исчезает.

Answer 3

Отличная идея с прозрачным слоем сверху.

Не было бы самым простым способом сделать изображения с изображениями того же размера, что и изображение страны, при этом изображения состояния будут прозрачными, за исключением самого состояния.

Просто для повторного использования аккордов и, конечно, в зависимости от характера проекта - насколько тяжелы изображения.