Using Raphael js with an image map and 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" /&开发者_如何学Gogt;
   <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.

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);
             })
           });

If you look closely at the http://raphaeljs.com/australia.html example code source you'll see that there's a "paper" div included in a "canvas" div... "paper" div is more or less the container and where most of the action takes place...

In my case, I had no choice but using a business administration committee members picture in background... so I used CSS "background-image:url('myImage.jpg') no-repeat;" property to put my image in background of the "paper" div and set its width and height to be the same as the image. That did the trick.

Actually the effect I wanted to come up with was to have a nice clean cut highlighted section of each committee member with a detail info in a tooltip, as the user move his mouse over each member on the picture... Square transparent .png wouldn't have allowed me to reach the precision I needed, so I decided to go for SVG vectors and Raphael coding... I created all my paths using Microsoft Expression Blend (I guess you can use any SVG editor you want)...

The thing is I used the Expression Blend tool a loooooot with WPF and Silvelright BI app, so drawing and cutting the path part was rather easy for me... I then just needed to cut and paste the "M.......z" generated parameter in Raphael code - pretty much the same way as in the http://raphaeljs.com/australia.html example source code.

I tested the code with most browsers (IE, Firefox, Chrome, Safari...) and it worked pretty well and I must say that I'm pretty satisfied with the result. So are the clients :)