none
Can't set mouse cursor to crosshair RRS feed

  • Question

  • I'm trying to set the mouse cursor to a crosshair (from the default hand) and it's not working:

    document.getElementById(

    "map").style.cursor = "crosshair";
    Steve Kahler
    • Moved by Ricky_Brundritt Friday, March 9, 2012 6:19 PM (From:Bing Maps: Map Control and Web services Development)
    Monday, June 20, 2011 11:14 PM

Answers

  • This question was already solved on this forums:

    http://social.msdn.microsoft.com/Forums/en-US/vemapcontroldev/thread/d2aba403-1974-430a-8993-6fb16dd2e87a

    http://social.msdn.microsoft.com/Forums/en-US/vemapcontroldev/thread/ed7e0811-d776-44f5-a68b-e2f5a03b84e2/#e486bfcf-95a0-47d1-934b-355d59c971be

     

    And here is a sample code:

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title></title>
     <script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onscriptload=getMap">
     </script>
     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js"></script>
     <script type="text/javascript">
     var map = null;
    		var cursorStyle = null;
    
     function getMap() {
    
     // Initialize the map
     map = new Microsoft.Maps.Map($('#map').get(0), {
     credentials: "YOURKEY",
     center: new Microsoft.Maps.Location(47.5, 2.75),
     zoom: 4,
     mapTypeId: Microsoft.Maps.MapTypeId.road
     });
    
     var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.5, 2.75));
     map.entities.push(pin); 
    
    			Microsoft.Maps.Events.addHandler(pin, 'mouseover', changeCursor);
    			Microsoft.Maps.Events.addHandler(pin, 'mouseout', revertCursor);	
     }
    		
    		function changeCursor(e) { 
    			$('.MicrosoftMap').css({'cursor':'pointer'});
    		}
    		function revertCursor(e) { 
    			$('.MicrosoftMap').css({'cursor':'url("http://ecn.dev.virtualearth.net/mapcontrol/v7.0/cursors/grab.cur"), move'});	
    		}
    	</script>
    </head>
    <body onload="getMap();">
     <div id="map" style="position: relative; width: 800px; height: 600px;">
     </div>
    </body>
    </html>
    
    

    If you don't want this scenario, you can easily use the first solution brought by Chris but make sure you apply the style on the correct element and consider the fact that there are build-in styles and you might need to override them by using !important note on style.

    In your case, try to get the root element and then apply the style to the returned element.

    Microsoft.Maps.Events.addHandler(map, "mousemove", function (e) {
     // get the HTML DOM Element that represents the Map
     var mapElem = map.getRootElement();
     if (e.targetType === "map") {
      // Mouse is over Map
      mapElem.style.cursor = "crosshair";
     } else {
      // Mouse is over Pushpin, Polyline, Polygon
      mapElem.style.cursor = "pointer";
     }
    });

     


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/

    Monday, June 20, 2011 11:42 PM
    Moderator

All replies

  • I found that by this command it sets the mouse cursor to crosshair on the map:

    document.getElementById(

    "map").childNodes[1].style.cursor = "crosshair";


    Steve Kahler
    Monday, June 20, 2011 11:39 PM
  • This question was already solved on this forums:

    http://social.msdn.microsoft.com/Forums/en-US/vemapcontroldev/thread/d2aba403-1974-430a-8993-6fb16dd2e87a

    http://social.msdn.microsoft.com/Forums/en-US/vemapcontroldev/thread/ed7e0811-d776-44f5-a68b-e2f5a03b84e2/#e486bfcf-95a0-47d1-934b-355d59c971be

     

    And here is a sample code:

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title></title>
     <script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onscriptload=getMap">
     </script>
     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js"></script>
     <script type="text/javascript">
     var map = null;
    		var cursorStyle = null;
    
     function getMap() {
    
     // Initialize the map
     map = new Microsoft.Maps.Map($('#map').get(0), {
     credentials: "YOURKEY",
     center: new Microsoft.Maps.Location(47.5, 2.75),
     zoom: 4,
     mapTypeId: Microsoft.Maps.MapTypeId.road
     });
    
     var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(47.5, 2.75));
     map.entities.push(pin); 
    
    			Microsoft.Maps.Events.addHandler(pin, 'mouseover', changeCursor);
    			Microsoft.Maps.Events.addHandler(pin, 'mouseout', revertCursor);	
     }
    		
    		function changeCursor(e) { 
    			$('.MicrosoftMap').css({'cursor':'pointer'});
    		}
    		function revertCursor(e) { 
    			$('.MicrosoftMap').css({'cursor':'url("http://ecn.dev.virtualearth.net/mapcontrol/v7.0/cursors/grab.cur"), move'});	
    		}
    	</script>
    </head>
    <body onload="getMap();">
     <div id="map" style="position: relative; width: 800px; height: 600px;">
     </div>
    </body>
    </html>
    
    

    If you don't want this scenario, you can easily use the first solution brought by Chris but make sure you apply the style on the correct element and consider the fact that there are build-in styles and you might need to override them by using !important note on style.

    In your case, try to get the root element and then apply the style to the returned element.

    Microsoft.Maps.Events.addHandler(map, "mousemove", function (e) {
     // get the HTML DOM Element that represents the Map
     var mapElem = map.getRootElement();
     if (e.targetType === "map") {
      // Mouse is over Map
      mapElem.style.cursor = "crosshair";
     } else {
      // Mouse is over Pushpin, Polyline, Polygon
      mapElem.style.cursor = "pointer";
     }
    });

     


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/

    Monday, June 20, 2011 11:42 PM
    Moderator