Hiệu ứng lơ lửng trên bản đồ hình ảnh jquery nói lắp trong và ngoài

Question

Tôi đang đặt cùng một bản đồ của Hoa Kỳ có trạng thái di chuột mà tôi cần kích hoạt bằng cách nào đó. Cách tôi đã xây dựng nó (và đã làm điều này trước khi trên một quy mô nhỏ hơn không có vấn đề) là để imagemap hình ảnh chính của Hoa Kỳ, cho mỗi khu vực một id, sau đó sử dụng jQuery để hiển thị/ẩn một vị trí tuyệt đối div bản đô. Mỗi div chứa một hình ảnh với bản đồ riêng của nó, mà khi được kết hợp chỉ gửi một lệnh show() để nó vẫn được đặt.

Tôi cũng có một số jquery ẩn tất cả div trên mouseleave. Vấn đề là, các hiệu ứng di chuột tiếp tục bật và tắt trong hiệu ứng nói lắp điên rồ này. Tôi đang làm gì sai? Như bạn có thể thấy tôi đã thử nghiệm với các chức năng khác nhau, bao gồm di chuột qua, mouseenter và di chuột.

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

Và jQuery tôi:

$(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

tôi sẽ đề nghị sử dụng phương pháp jquery .hover() thay vì .mouseover(), .mouseenter(), .mouseleave() phương pháp để kiểm soát hiển thị/ẩn của hình ảnh. Bạn có thể kiểm soát các phương thức fadein() và fadeout() đáng tin cậy hơn nhiều.

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

Answer 2

Đồng ý jQuery hover là một ý tưởng hay.

Ngoài ra tôi muốn xem xét như sau:

• Tận dụng bản đồ nền (CAS_hotspot_exporter_v2.jpg) một hình ảnh nền của div # mapContainer.
• Sử dụng hình ảnh 1px trong suốt cho bản đồ hình ảnh.
• Đặt chiều rộng và chiều cao cho giống như hình ảnh bản đồ cơ sở.
• Cung cấp các div bị mờ dần (ví dụ: # california) chỉ mục z là -1.

Làm tất cả điều đó có nghĩa là có một bề mặt trong suốt luôn ở trên cùng để chuột "di chuột" lên và các div khác được đưa vào "bên dưới" bề mặt đó. Bằng cách đó, trình duyệt không được kích hoạt sự kiện mouseleave khi div mới mất dần.

Answer 3

Ý tưởng tuyệt vời với lớp trong suốt ở trên cùng.

Nó sẽ không phải là cách dễ nhất để làm cho hình ảnh nhà nước cùng kích thước như hình ảnh quốc gia với hình ảnh nhà nước được minh bạch ngoại trừ chính nhà nước.

Chỉ để tái sử dụng hợp âm và tất nhiên tùy thuộc vào bản chất của dự án - mức độ nặng của hình ảnh.