This method, although similar to the method I covered in my last post, uses the InfoWindow of the map rather than a rollover associated with a Point Of Interest (POI). The InfoWindow is populated with the title and content when the overlay is moused-over, and follows the cursor, similar to a tooltip.

The biggest disadvantage with this method comes from the need to step outside of the API to attach a mousemove event. This means that the solution needs to take browser differences into consideration. In order to simplify the code, and because I generally use ASP.NET for most of my work, you will notice that I have utilized a few shortcuts provided by the Microsoft AJAX Library.

The most important things to understand here are the loc object and the ScrollTest function. Sys.UI.DomElement.getLocation() is a function provided by the Microsoft AJAX Library which returns an object with two properties, x and y. These coordinates represent the location of the element relative to the window. The ScrollTest function returns an object representing the amount that the window has been scrolled. Using these two values, along with coordinates returned by the mousemove event object, the coordinates of the mouse in relation to the map can be discovered. These coordinates are used to place the InfoWindow on the map.

Listing 1 - The AddRollover function

 // This solution uses the Microsoft AJAX Library.
 // Get it here: http://www.asp.net/ajax/downloads/

 // This function is necessary since different
 // browsers implement this in slightly different ways.
 function ScrollTest(){
     var elemental = document.documentElement;
     var lefty = (elemental.scrollLeft ?
            elemental.scrollLeft :
            document.body.scrollLeft);
     var toppy = (elemental.scrollTop ?
            elemental.scrollTop :
            document.body.scrollTop);

     return { top : toppy, left : lefty }
 }

 function AddRollover(roMap, roOverlay, roTitle, roContent){
     var mapDiv = $get('mapWindow');

     roOverlay.setAltColorAlpha(roOverlay.getAltColorAlpha() - 0.2);
     roOverlay.setAltFillColorAlpha(roOverlay.getAltFillColorAlpha() - 0.2);

     function MouseFollow(e) {
         var scrooll = ScrollTest();
         var loc = Sys.UI.DomElement.getLocation($get('mapWindow'));
         // $get() is a short form for getElementById()
         var point = new MQPoint(e.clientX + scrooll.left - loc.x,
             e.clientY + scrooll.top - loc.y);
         roMap.openInfoWindow(point);
     }

     MQEventManager.addListener(roOverlay, "mouseover", function(){
         // Each map only has one InfoWindow, so we need to set these values
         // every time the mouse is over an overlay
         roMap.setInfoTitleHTML(roTitle);
         roMap.setInfoContentHTML(roContent);

         // $addHandler is simply a cross-browser method for attaching an event handler, provided
         // by the Microsoft AJAX Library
         $addHandler(mapDiv, 'mousemove', MouseFollow);
         roOverlay.setAltStateFlag(true);
     });

     MQEventManager.addListener(roOverlay, "mouseout", function(){
         $removeHandler(mapDiv, 'mousemove', MouseFollow);
         roMap.getInfoWindow().hide();
         roOverlay.setAltStateFlag(false);
     });
 }