jquery image map hover effetto stuttering dentro e fuori

Question

Sto mettendo insieme una mappa degli Stati Uniti che ha stati hover che ho bisogno di innescare in qualche modo. Il modo in cui l'ho costruito (e lo ho già fatto su una scala più piccola senza problemi) è quello di immaginare l'immagine principale degli Stati Uniti, assegnare ad ogni area un id, quindi usare jQuery per mostrare/nascondere un div overtop posizionato in modo assoluto la mappa. Ogni div contiene un'immagine con la propria mappa, che quando si passa con il mouse semplicemente invia un comando show() in modo che rimanga inserito.

Ho anche qualche jQuery che nasconde tutti i div su mouseleave. Il problema è che gli effetti al passaggio del mouse continuano a girare e spegnersi in questo folle effetto di balbuzie. Che cosa sto facendo di sbagliato? Come puoi vedere, ho sperimentato varie funzioni, tra cui mouseover, mouseenter e 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> 

E il mio 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

Io suggerirei di usare il metodo al posto dei .mouseover(), .mouseenter(), .mouseleave() metodi jQuery .hover() per controllare la proiezione/nascondere delle immagini. È possibile controllare i metodi fadein() e fadeout() in modo molto più affidabile.

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

Answer 2

Concordato jQuery hover è una buona idea.

Inoltre mi piacerebbe prendere in considerazione quanto segue:

• Fai la mappa di base (CAS_hotspot_exporter_v2.jpg) un'immagine di div # mapContainer sfondo.
• Utilizzare un'immagine 1 px trasparente per la mappa immagine.
• Imposta larghezza e altezza allo stesso valore dell'immagine della mappa di base.
• Dai ai div che si dissolvono (ad esempio #california) uno z-index di -1.

Tutto ciò significa che c'è una superficie trasparente sempre in primo piano perché il mouse "si posizioni sopra" e gli altri div siano portati "sotto" quella superficie. In questo modo il browser non dovrebbe attivare un evento di mouseleave quando il nuovo div si affievolisce.

Answer 3

Ottima idea con uno strato trasparente sulla parte superiore.

Non sarebbe il modo più semplice per rendere le immagini di stato delle stesse dimensioni dell'immagine del paese con le immagini di stato trasparenti tranne che per lo stato stesso.

Solo per il riutilizzo degli accordi e, naturalmente, a seconda della natura del progetto, quanto diventano pesanti le immagini.