使用拉斐爾js與圖像映射和jQuery

我有一個圖像與關聯的圖像映射（下面），我使用jQuery來檢測當我在圖像映射元素上獲得鼠標懸停。然後我想要做的就是用拉斐爾js在地圖的頂部繪製一些「東西」。使用拉斐爾js與圖像映射和jQuery

<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的事件jQuery將不會觸發事件。如果我改變Raphael使用圖像ID如下;

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

然後反過來會發生，我會從jQuery獲取事件，但文本不可見。

圖像本身是一個沒有透明度的純色地圖。

來源

2011-07-20 Ryan O' Neill

你可能會忘記圖像映射和jQuery，並簡單地使用Raphael在圖像本身的頂部。

您可以使用Raphael定義可以附加自定義功能/事件的圓圈/區域（可以是初始透明的）。通過這種方式，當用戶懸停在底層圖像的某個區域時，Raphael功能可以觸發，並且您可以製作所需的視覺反饋。

您可以在這裏找到一個很好的教程，解釋如何將事件附加到您爲懸停和單擊事件創建的對象。 http://playground.mobily.pl/tutorials/building-an-interactive-map-with-raphael.html

此外，請查看http://raphaeljs.com/australia.html示例的來源。

I.e.像下面這樣的東西會在你的地圖上繪製一個圓圈，然後對它進行動畫處理。但是你可以修改懸停事件如果在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); 
      }) 
      });

來源

2011-07-22 08:14:05 pnairn

這就是我正在建議的。 –

我最終這樣做了，圖像地圖顯然沒有得到很好的支持。 –

.. 。「紙」 DIV更或容器少，其中大部分動作發生......

就我而言，我只好用企業管理委員會成員在背景圖片... 所以我用CSS「background-image：url（'myImage.jpg'）no-repeat;」屬性將我的圖像放在「紙」div的背景中，並將其寬度和高度設置爲與圖像相同。那就是訣竅。

其實我想要的效果是每個委員會成員在工具提示中都有一個非常乾淨的切割高亮部分，當用戶將鼠標移動到圖片上的每個成員上時... Square透明.png不會讓我達到我需要的精度，所以我決定去SVG矢量和拉斐爾編碼... 我創建了所有我的路徑使用Microsoft Expression Blend（我想你可以使用任何SVG編輯器想要）...

事情是我用表情混合工具loooooot與WPF和Silvelright BI應用程序，因此，繪製和切割路徑部分對我來說是相當容易的...然後我只需要切割和在Raphae中粘貼「M ....... z」生成的參數l代碼 - 幾乎與http://raphaeljs.com/australia.html示例源代碼中的方法相同。我測試了大多數瀏覽器（IE，Firefox，Chrome，Safari ......）的代碼...），它工作得很好，我必須說我對結果非常滿意。所以客戶:)

來源

2011-08-27 19:25:14 MawashiKid

使用拉斐爾js與圖像映射和jQuery

回答

相關問題