Question

我有一个带有相关图像映射的图像（下图），我正在使用jQuery来检测何时将鼠标悬停在图像映射元素上。我当时想要做的是用Raphael js在地图顶部绘制一些“东西”。

   <map name="regionMapView" id="regionMapView">
      <area id="Carlisle" shape="circle" coords="305,505,10" alt="Carlisle" title="Carlisle" />
   </map>
   <img id="imgMap" src="MapLarge.gif" width="585" height="1135" border="0" usemap="#regionMapView" />
   <script type="text/javascript" src="./Scripts/jquery-1.6.2.min.js"></script>
   <script type="text/javascript" src="./Scripts/raphael-min.js"></script>
   <script type="text/javascript">
      $(document).ready(function () {
         var paper = Raphael(0,0, 585, 1135);
         var t = paper.text(200, 200, "Text at 200, 200");
         $("#Carlisle").hover(function () { alert('in'); }, function () { alert('out'); });
      });
   </script>

上面显示了应该的文本，但jQuery不会触发事件，因为Raphael画布位于图像映射的顶部（这是我想要的视觉效果），但会阻止jQuery事件触发。如果我改变拉斐尔使用图像ID如下;

     var paper = Raphael(document.getElementById("imgMap"), 585, 1135);

然后反过来会发生，我会从jQuery获取事件，但文本不可见。

图像本身是一个没有透明度的纯色地图。

Answer 1

你可能会忘记图像映射和jQuery，只需在图像顶部使用Raphael。

您可以使用Raphael定义可以将自定义函数/事件附加到的圆/区域（最初可以是透明的）。通过这种方式，当用户将鼠标悬停在底层图像的某个区域上时，Raphael功能可以触发，您可以产生所需的视觉反馈。

您可以在此处找到一个很好的教程，解释如何将事件附加到您为悬停和单击事件创建的对象。 http://playground.mobily.pl/tutorials/building-an-interactive-map-with-raphael.html

另外，请查看http://raphaeljs.com/australia.html示例的来源。

即。类似下面的内容将在地图中绘制一个圆，然后为其设置动画。但您可以修改悬停事件以显示您的文本等。

var circle = paper.circle(50, 40, 10);
circle.hover(function(){
               this.animate({
                 fill: '#1669AD'
               }, 300);
             },
             function(){
               this.animate({
                 fill: attributes.fill
               }, 300);
             })
           });

Answer 2

如果仔细查看http://raphaeljs.com/australia.html示例代码源，您会看到“canvas”div中包含“paper”div ... “纸”div或多或少是容器，大多数动作发生在哪里......

就我而言，我别无选择，只能在后台使用工商管理委员会成员图片...... 所以我使用CSS“background-image：url（'myImage.jpg'）no-repeat;”放置我的形象的财产在“纸”div的背景中，并将其宽度和高度设置为与图像相同。这就是诀窍。

实际上，我想要提出的效果是每个委员会成员都有一个很好的干净切割突出部分，工具提示中有详细信息，用户将鼠标移到图片上的每个成员上...方形透明.png不会让我达到我需要的精度，所以我决定去SVG矢量和Raphael编码...... 我使用Microsoft Expression Blend创建了所有路径（我猜你可以使用你想要的任何SVG编辑器）......

问题是我使用了Expression Blend工具和WPF以及Silvelright BI应用程序的loooooot，所以绘制和切割路径部分对我来说相当容易......然后我只需要在Raphael代码中剪切并粘贴“M ....... z”生成的参数 - 几乎与{ {3}}示例源代码。

我使用大多数浏览器（IE，Firefox，Chrome，Safari等）测试了代码，并且效果非常好，我必须说我对结果非常满意。客户也是如此：）

使用Raphael js与图像映射和jQuery

2 个答案: