Question

我有一个带有互动美国地图的页面。每个状态是基于来自数据库的设置可互换的图像（它不是一个大图像和/或图像映射）。我还有一个无序列表（绝对位于其相应状态的项目）设置为可点击元素以更改div的内容。 div包含他们自己的div中的所有内容;显示哪个div是基于有一个＆＃34;活跃的类。＆＃34; 可以在此处查看脚本和标记：https://gist.github.com/3239999 （我知道我可以编写脚本来减少冗余代码...现在和我一起裸露:-)）

由于png图像的重叠，图像本身不能可靠地成为可点击元素，但我希望状态在可能的情况下指示链接。

gist中的代码无处不在，但在新英格兰/东海岸地区的小国家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/

实际网站是实时网站，但我正在使用演示服务器进行测试。我已经在IE中设置了红色边框，这有助于您了解问题所在的位置。似乎最糟糕的是西弗吉尼亚州和弗吉尼亚州。由于他们从某个角度互相拥抱，我无法改变z-index来修复它。一个人总是过度重叠另一个人。

有什么想法吗？提前致谢！

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的state_info将switchers链接到.data()，但我不确定您是否正确使用它并且每次点击都会丢失错误。

就IE6的问题而言，我建议将WV或VA移出其他东海岸州。即使在这种工作正常的浏览器中，也很难找到它。为了进一步提高可用性，您可以执行我之前提到的操作，并以某种方式突出显示悬停时的状态名称。您可以更改颜色，增加大小，添加阴影......无论如何，只要它清楚地向用户选择哪个状态。

使用JQuery的交互式美国地图

1 个答案: