[GIS] how to change the mouse cursor into pan when i select the pan icon in openLayers

openlayers-2

I want to change the mouse cursor into a hand icon when I select to pan.
I have tried this code:

map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.MouseToolbar());
map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
map.addControl(new OpenLayers.Control.Permalink());
map.addControl(new OpenLayers.Control.Permalink('permalink'));
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.OverviewMap());
map.addControl(new OpenLayers.Control.KeyboardDefaults());
map.addControl(new OpenLayers.Control.Dragpan());
map.addControl(new OpenLayers.Control.Pan());
map.addControl(new OpenLayers.Control.PanPanel());

OpenLayers.Control.DragPan = OpenLayers.Class(OpenLayers.Control, {
type: OpenLayers.Control.TYPE_TOOL,
panned: false,
interval: 25,
documentDrag: false,
draw: function() {

this.handler = new OpenLayers.Handler.Drag(this, {     
                "move": this.panMap,     
                "done": this.panMapDone     
            }, {     
                interval: this.interval,     
                documentDrag: this.documentDrag     
            }     
        );     
    },     
panMap: function(xy) {     
        this.panned = true;     
        this.map.pan(     
            this.handler.last.x - xy.x,     
            this.handler.last.y - xy.y,     
            {dragging: this.handler.dragging, animate: false}     
        );     
    },
 panMapDone: function(xy) {     
        if(this.panned) {     
            this.panMap(xy);     
            this.panned = false;     
        }     
    },     

    CLASS_NAME: "OpenLayers.Control.DragPan"     
}); 
map.addControl(control);

Best Answer

You may use the setMousePointerSwitcher() function, see example code in link below:

function setMousePointerSwitcher() {
    var panelControls = 
         map.getControlsBy('div', $('basic-controls'))[0].controls;
    for (var i = 0; i < panelControls.length; i = i + 1) {
        var c = panelControls[i];
        c.events.register('activate', c, function() {
                mousePointerStyle = MOUSE_POINTER_STYLES[this.CLASS_NAME];
        });
    }

    // Change mouse pointer style when it is over the map area.
    $('map').observe('mouseover', function() {
        document.body.style.cursor = mousePointerStyle;
    });

    // When not over the map area, mouse pointer style 
    // is the default one.
    $('map').observe('mouseout', function() {
        document.body.style.cursor = 'default';
    });
}

Changing mouse pointer style in OpenLayers

Related Question