jquery - 将 Raphael js 与图像映射和 jQuery 结合使用

Question

我有一个带有关联图像映射的图像(如下)，并且我使用 jQuery 来检测鼠标悬停在图像映射元素上的时间。然后我想做的是用 Raphael js 在 map 顶部绘制一些“东西”。

   <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 Canvas 位于图像映射的顶部(这就是我视觉上想要的)，但会阻止 jQuery 事件触发。如果我将 Raphael 更改为使用图像 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 的来源示例。

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

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