jquery mapa de imagen efecto de fluctuación de la imagen tartamudeo dentro y fuera

Question

Estoy armando un mapa de los Estados Unidos que tiene estados de vuelo estacionario que necesito activar de alguna manera. La forma en que lo he construido (y lo he hecho antes en una escala más pequeña sin ningún problema) es crear un mapa de imagen de la imagen principal de EE. UU., Darle a cada área una identificación, luego usar jQuery para mostrar/ocultar un sobred div completamente posicionado el mapa. Cada div contiene una imagen con su propio mapa, que cuando pasa el mouse simplemente envía un comando show() para que permanezca.

También tengo un jquery que oculta todos los divs en mouseleave. El problema es que los efectos de vuelo estacionario se activan y desactivan con este loco efecto de tartamudeo. ¿Qué estoy haciendo mal? Como puedes ver, he experimentado con varias funciones, como mouseover, mouseenter y 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> 

Y mi 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

se recomienda usar el método en lugar de los .mouseover(), .mouseenter(), .mouseleave() métodos jQuery .hover() para controlar la proyección/ocultación de las imágenes. Puede controlar los métodos fadein() y fadeout() de forma mucho más fiable.

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

Answer 2

Acordado jQuery vuelo estacionario es una buena idea.

También me gustaría considerar lo siguiente:

• Hacer la imagen de fondo del div # mapContainer mapa base (CAS_hotspot_exporter_v2.jpg).
• Usa una imagen transparente de 1px para el mapa de imagen.
• Establezca el ancho y la altura iguales a la imagen del mapa base.
• Dé a los divs que se desvanezcan (por ejemplo, #california) un índice z de -1.

Hacer todo eso significa que hay una superficie transparente siempre en la parte superior para el ratón a "flotar" una y los otros divs son traídos "por debajo" de esa superficie. De esta forma, el navegador no debe desencadenar un evento mouseleave cuando el nuevo div se desvanece.

Answer 3

Excelente idea con una capa transparente en la parte superior.

¿No sería la forma más fácil de hacer que las imágenes de estado del mismo tamaño que la imagen del país con las imágenes de estado sean transparentes, excepto por el estado en sí mismo?

Solo para la reutilización de acordes y, por supuesto, dependiendo de la naturaleza del proyecto: qué tan pesadas se vuelven las imágenes.