与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互动美国地图

回答

相关问题