使用SVG和RaphaelJS与链接在地图上的交互

Question

我一直在研究使用我在Illustrator中创建的自定义美国地图为我的公司创建交互式地图的最简单方法。我找到了这个教程：http://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map这是非常完整的，它将帮助我 部分 来实现我想要的结果。

但是当我想在区域悬停到地图的每个区域时添加点击和文字链接时呢？

我不熟悉JavaScript，所以我会非常感谢社区的帮助和理解。

Answer 1

假设您在raphael中定义了一个名为regionShape的元素，该元素对应于地图中的某个区域。点击添加链接应该非常简单：

regionShape.node.onclick = function(e) {  
                               window.location.href = "somepage.html";
                           }

为了在悬停时显示文本，我建议使用jQuery。我通常做的是定义div元素#hoverInfo并将其css display属性设置为none，然后使用rafael node.onmouseover修改此属性，如下所示：

regionShape.node.onmouseover = function(e) {  
            $("#hoverInfo").css("display", "block");  
        }; 

然后使用onmouseout删除它：

regionShape.node.onmouseout = function(e) {  
            $("#hoverInfo").css("display", "none");  
        };