Question

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.

Answer 1

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