與JQuery互動美國地圖

我有一個美國互動地圖的頁面。每個狀態是基於數據庫設置可互換的圖像（它不是一個大圖像和/或圖像映射）。我也有一個無序列表（項目絕對位於其相應的狀態）設置爲可點擊元素來更改div的內容。 div包含他們自己的div中的所有內容;其中顯示div是基於一類「活躍」。腳本和標記可以看這裏：https://gist.github.com/3239999 （我知道我可以腳本這減少冗餘代碼...裸陪我現在:-)）與JQuery互動美國地圖

由於PNG圖像的重疊時，圖像本身不能可靠地成爲可點擊元素，但我希望狀態在可能的情況下指向鏈接。

該要點的代碼無處不在，但在IE瀏覽器爲新英格蘭/東海岸地區的小州。我可以用一點Z指數工作來解決它，但這並不完美。在某些情況下，你必須點擊仍然正確的位置（這不是很明顯）。

我打開只爲IE使用不同的腳本，但我似乎無法改變它只使用li作爲指標，並在IE中工作。我曾經嘗試這樣做沒有成功：

<script type="text/javascript"> 
    $(document).ready(function() { 
     switchers = $('#switchers > li'); 
     states = $('#state_info > div'); 
     switchers.each(function(idx) { 
      $(this).data('state', states.eq(idx)); 
     }).click(function() { 
       switchers.removeClass('active'); 
       states.removeClass('active');              
       $("#_" + $(this).attr('id')).addClass('active');   
       $("#_" + $(this).attr('id')).data('state').addClass('active'); 
     }); 
    }); 
</script>

我不是在jQuery精明，因爲我想成爲，尤其是解決跨瀏覽器的問題。

任何人都可以幫助我更好地工作嗎？

你可以看到這裏的大部分工作版本：http://www.envisiondemo.com/lookout/state-and-federal-i-9-compliance/

實際的網站是活的，但我使用的是演示服務器進行測試。我已經在IE中設計了一個紅色的邊框，它可以幫助你看到問題所在的地方。看來最糟糕的是西弗吉尼亞和弗吉尼亞。由於他們從一個角度相互擁抱，我不能改變z-index來修復它。一個將永遠與另一個過度重疊。

任何想法？提前致謝！

來源

2012-08-02 user1572393

用SVG代替它 – Radu 2012-08-02 21:37:43

Hey Radu，你能否詳細說明你的意思是「用SVG做它」？ – user1572393 2012-08-03 16:05:08

我已經將SVG理解爲一種圖像類型......它似乎被用作網頁的閃光解決方案。 – user1572393 2012-08-07 15:14:25

其他的是看它切換到SVG（這點我承認可能有點偏激因爲它似乎你沿遠很漂亮，我提出以下建議：

使用一個背景圖像，這樣即可絕對避免定位狀態的所有圖像所以不是具有下面的代碼：

<div id="states"> 
    <img /> 
    <img /> 
</div> 

<ul id="switchers"> 
    <li></li> 
    <li></li> 
</ul>

你可能只是：

<ul id="states"> 
    <li></li> 
    <li></li> 
</ul>

，並設置地圖的Wi th background-url。最後，我實際上將這些狀態的名稱添加到li元素中，而不是將它們放在圖像中。這可以讓你在懸停時突出顯示。

如下您的腳本可以改進：

http://jsfiddle.net/radu/4bVcd/

$(document).ready(function() { 
    var $switchers = $('#switchers li'), 
     $states = $('#state_info div'); 

    $switchers.click(function() { 
     $switchers.removeClass('active'); 
     $states.removeClass('active'); 
     $(this).addClass('active'); 
     $('#_' + this.id).addClass('active'); 
    }); 
});

在腳本switchers和states不言自明的全局，因爲var說法是不存在的。我用我的jQuery對象前綴$，但這只是個人偏好。

在你的代碼中，你通過jQuery的.data()將state_info鏈接到switchers，但是我不確定你是否正確地使用了它，並且每次點擊都會引發錯誤。

就您對IE6的問題而言，我推薦將WV或VA移動到其他東海岸州。即使在瀏覽器工作正常的情況下，挑出它也有點困難。爲了進一步提高可用性，您可以執行前面提到的操作，並以某種方式突出顯示懸停時的州名。你可以改變顏色，增加尺寸，添加陰影..無論如何，只要它清楚地告訴用戶哪個狀態正在被選中。

來源

2012-08-07 17:36:58 Radu

與JQuery互動美國地圖

回答

相關問題