使用JQuery的交互式美国地图

Question

我有一个带有交互式美国地图的页面。每个状态都是一个可根据数据库中的设置互换的图像(它不是一个大图像和/或图像映射)。我还将一个无序列表(项绝对位于其相应状态之上)设置为可单击元素，以更改div的内容。div包含它们自己的div中的所有内容；显示哪个div是基于拥有一个“active”类。可在此处查看脚本和标记：https://gist.github.com/3239999

由于png图像的重叠，图像本身不能可靠地作为可点击元素，但如果可能的话，我希望状态指向链接。

要点中的代码在任何地方都有效，但在IE中适用于新英格兰/东海岸地区的小州。我可以通过一些z-index工作来解决它，但它不是完美无缺的。在某些情况下，你仍然必须点击正确的位置(这不是立即明显的)。

我对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/

实际的站点是实时的，但我正在使用演示服务器进行测试。我已经将li的样式设置为在IE中有一个红色边框，这有助于您看到问题所在。看起来最糟糕的是西弗吉尼亚州和弗吉尼亚州。因为他们从一个角度拥抱对方，我不能改变z索引来修复它。其中一个总是过度重叠另一个。

Answer 1

另外，考虑将其转换为SVG (我承认这可能有点极端，因为似乎你已经走得相当远了，我可以推荐以下几点：

使用单个背景图像，这样您就可以避免绝对定位所有状态的图像。因此，不使用下面的代码：

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

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

你可以只需要：

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

并使用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搬到其他东海岸州去。即使在浏览器中，它也能很好地工作，要把它挑出来也有点困难。为了进一步提高可用性，您可以执行我前面提到的操作，并以某种方式在悬停时突出显示状态名称。你可以改变颜色，增加大小，添加阴影..无论如何，只要用户清楚地知道所选择的是哪种状态。​