我有一个美国互动地图的页面。每个状态是基于数据库设置可互换的图像(它不是一个大图像和/或图像映射)。我也有一个无序列表(项目绝对位于其相应的状态)设置为可点击元素来更改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来修复它。一个将永远与另一个过度重叠。
任何想法?提前致谢!
用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