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

发布于 2024-11-25 11:39:42 字数 1170 浏览 2 评论 0原文

我有一个带有关联图像映射的图像（如下），并且我使用 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 事件触发。如果我将 Raphael 更改为使用图像 ID，如下所示；

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

然后会发生相反的情况，我将从 jQuery 获取事件，但文本不可见。

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

原文

I have an image with an associated image map (below) and I'm using jQuery to detect when I get a mouseover on the image map elements. What I then want to do is draw some 'stuff' over the top of the map with 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>

The above shows text as it should, but jQuery will not fire the events because the Raphael canvas sits over the top of the image map (which is what I want visually) but will prevent the jQuery events from firing. If I change Raphael to use the image ID as follows;

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

Then the reverse will happen, I'll get the events from jQuery but the text is not visible.

The image itself is a solid colour map with no transparency.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尤怨 2024-12-02 11:39:42

您可以忘记图像映射和 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);
             })
           });

You could just forget the image map and jQuery, and simply use Raphael over the top of the image itself.

You could use Raphael to define circles/regions (which can be initially transparent) which you can attach custom functions/events to. In this way when the user hovers over an area of the underlying image, the Raphael functions can trigger, and you can produce your required visual feedback.

You can find a good tutorial here that explains how to attache events to the objects you create for hover and click events. http://playground.mobily.pl/tutorials/building-an-interactive-map-with-raphael.html

Also, view the source of the http://raphaeljs.com/australia.html example.

I.e. something like the following will draw a circle in your map, and then animate it. But you could modify the hover event to display your text etc.

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

回复收藏 0 原文

影子的影子 2024-12-02 11:39:42

如果您仔细查看 http://raphaeljs.com/australia.html 示例代码源，您将看到“canvas”div 中包含一个“paper”div...
“纸”div 或多或少是容器，也是大部分动作发生的地方......

就我而言，我别无选择，只能在背景中使用工商管理委员会成员的照片......
所以我使用了CSS“background-image:url('myImage.jpg') no-repeat;”属性来放置我的图像
在“paper”div的背景中并将其宽度和高度设置为与图像相同。这就成功了。

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

问题是我将 Expression Blend 工具与 WPF 和 Silvelright BI 应用程序结合使用，
所以绘制和剪切路径部分对我来说相当容易......然后我只需要剪切并粘贴 Raphael 代码中的“M.......z”生成的参数 - 与 < 中的方式几乎相同a href="http://raphaeljs.com/australia.html" rel="nofollow">http://raphaeljs.com/australia.html 示例源代码。

我用大多数浏览器（IE、Firefox、Chrome、Safari...）测试了代码，它运行得很好，我必须说我对结果非常满意。客户也是如此:)