ASPX Page: 
<img id="img2" src='images/symbols/test.png' alt="" onclick="onTestAddSymbol('images/symbols/test.png')" style="cursor:pointer"   />


Javascript Page: 


var DRAW_ZOOM_LEVEL = 16;
var MAX_ZOOM_LEVEL = 19;
var MIN_ZOOM_LEVEL = 3;
var MAP_MODE_DESC = 'Current Map Mode: ';
var INMEMORY_DESC = 'InMemoryDesc';
var INMEMORY_SHAPE_TYPE = 'InMemoryShapeType';
var EDIT_OVERLAY = 'EditOverlay';
var VECTOR_STYLE_DEFAULT = 'default';
var VECTOR_STYLE_SELECT = 'select';
var selectedMarker = null;
var map = null;

function onTestAddSymbol(strSymbolFileName) {
        onAddSymbol = true;
        var markerType = $get('iptMarker');
        markerType.value = '/images/symbols/' + strSymbolFileName;
        Map1.SetDrawMode('Point');
}

function AddSymbol(latlon, symbolPath) {
    map = Map1.GetOpenLayersMap();
    var markers = map.getLayer('MarkerSymbol');
    var size = new OpenLayers.Size(65, 29);
    //var offset = new OpenLayers.Pixel(-10, -17);
    var offset = new OpenLayers.Pixel(-(size.w - 30 / 2), -10);
    var icon = new OpenLayers.Icon(symbolPath, size, offset);
    // var marker = new OpenLayers.Marker(new OpenLayers.LonLat(latlon.lon, latlon.lat), icon);
    var marker = new OpenLayers.Marker(new OpenLayers.LonLat(latlon), icon);

    marker.events.register('mousedown', marker, function(evt) {
        selectedMarker = this;
        isDragging = true;
        OpenLayers.Event.stop(evt);
    });
    marker.events.register('mouseup', marker, function(evt) {
        isDragging = false;
        selectedMarker = null;
    });

    marker.events.register('mousemove', marker, function(evt) {
        if (isDragging && selectedMarker != null) {
            var newXY = evt.xy;
            var targetXY = map.getLayerPxFromViewPortPx(newXY);
            var markerXY = new OpenLayers.Pixel(targetXY.x, targetXY.y );
            selectedMarker.moveTo(markerXY);
            OpenLayers.Event.stop(evt);
        }
    });
    //var test = markers.wireDragEvents;
    markers.addMarker(marker);
}


var OnClientDrawEnd = function(feature) {
    if (onAddSymbol == true) {
        var markerType = $get('iptMarker');	
        var latlon = feature.geometry.bounds.getCenterLonLat();
        AddSymbol(latlon, markerType.value)     
	Map1.SetDrawMode('Normal');
	onAddSymbol = false;  
    }  
   
}

/*
Set map setting on OnMapCreated
*/
function OnMapCreated(map) {
    var map = Map1.GetOpenLayersMap();
    var markers = map.getLayersByName("MarkerSymbol");  
}

/*
Set Map default for Max Zoom Level, mouse event, draw shape color
*/
function OnMapCreating(map) {
    var map = Map1.GetOpenLayersMap();
    SetNavigationMouse();
    SetVectorStyle();    
}



/*
Set controls when shape edit mode is completed.
*/
var OnClientEditEnd = function(feature) {

}

/*
Fix Defects: "This.element is null..." and "This.element.scrolls is null..."
*/
function SetNavigationMouse() {
    //Fix Defects: "This.element is null..." and "This.element.scrolls is null..."
    OpenLayers.Events.prototype.includeXY = true;
    OpenLayers.Events.prototype.getMousePosition = function(evt) {

        if (!this.includeXY) {
            this.clearMouseCache();
        }
        else if (!this.element.hasScrollEvent) {
            OpenLayers.Event.observe(window, 'scroll',
                        OpenLayers.Function.bind(this.clearMouseCache, this));
            this.element.hasScrollEvent = true;
        }

        if (!this.element.scrolls) {
            this.element.scrolls = [
                                    (document.documentElement.scrollLeft
                                          || document.body.scrollLeft),
                                    (document.documentElement.scrollTop
                                          || document.body.scrollTop)
                                    ];
        }

        if (!this.element.lefttop) {
            this.element.lefttop = [
                                    (document.documentElement.clientLeft || 0),
                                    (document.documentElement.clientTop || 0)
                                    ];
        }

        if (!this.element.offsets) {
            this.element.offsets = OpenLayers.Util.pagePosition(this.element);
            this.element.offsets[0] += this.element.scrolls[0];
            this.element.offsets[1] += this.element.scrolls[1];
        }

        return new OpenLayers.Pixel(
                    (evt.clientX + this.element.scrolls[0]) - this.element.offsets[0]
                                 - this.element.lefttop[0],
                    (evt.clientY + this.element.scrolls[1]) - this.element.offsets[1]
                                 - this.element.lefttop[1]
                );
    }
    //"This.element is null..."
    OpenLayers.Events.prototype.clearMouseCache = function() {
        if (this.element) {
            this.element.scrolls = null;
            this.element.lefttop = null;
            this.element.offsets = null;
        }
    };
}
/*
Set default and select properties of drawn shape
*/
function SetVectorStyle() {
    OpenLayers.Feature.Vector.style[VECTOR_STYLE_DEFAULT]['fillColor'] = '#EEEEEE';
    OpenLayers.Feature.Vector.style[VECTOR_STYLE_DEFAULT]['strokeColor'] = '#FFFFFF';
    OpenLayers.Feature.Vector.style[VECTOR_STYLE_DEFAULT]['pointRadius'] = '6';
    OpenLayers.Feature.Vector.style[VECTOR_STYLE_DEFAULT]['fillOpacity'] = '0.6';
    OpenLayers.Feature.Vector.style[VECTOR_STYLE_DEFAULT]['strokeWidth'] = '8';
    OpenLayers.Feature.Vector.style[VECTOR_STYLE_DEFAULT]['strokeOpacity'] = '0.75';
    OpenLayers.Feature.Vector.style[VECTOR_STYLE_SELECT]['fillColor'] = '#FF9900';
    OpenLayers.Feature.Vector.style[VECTOR_STYLE_SELECT]['strokeColor'] = '#000066';
    OpenLayers.Feature.Vector.style[VECTOR_STYLE_SELECT]['pointRadius'] = '6';
    OpenLayers.Feature.Vector.style[VECTOR_STYLE_SELECT]['fillOpacity'] = '0.6';
    OpenLayers.Feature.Vector.style[VECTOR_STYLE_SELECT]['strokeWidth'] = '8';
    OpenLayers.Feature.Vector.style[VECTOR_STYLE_SELECT]['strokeOpacity'] = '0.75';

}

/*
Create custom ZoomBar for Map
*/
function CustomZoomBar() {
    var map = Map1.GetOpenLayersMap();
    if (map) {
        var PanZoomBar = map.getControlsByClass('OpenLayers.Control.PanZoomBar')[0];
        var PanZoom = map.getControlsByClass('OpenLayers.Control.PanZoom')[0];
        if (PanZoomBar) {
            //Make Zoom In image invisible
            var ZoomImg = document.getElementById(PanZoomBar.id + '_zoomin_innerImage');

            if (ZoomImg) {
                ZoomImg.style.display = "none";
            }
            //Make Zoom Out image invisible
            ZoomImg = document.getElementById(PanZoomBar.id + '_zoomout_innerImage');
            if (ZoomImg) {
                ZoomImg.style.display = "none";
            }
            //Make World Extent image invisible
            ZoomImg = document.getElementById(PanZoomBar.id + '_zoomworld_innerImage');
            if (ZoomImg) {

                ZoomImg.style.display = "none";
            }
            //Make ZoomBar slider image invisible
            ZoomImg = document.getElementById(PanZoomBar.id + '_' + map.id + '_innerImage')
            if (ZoomImg) {
                ZoomImg.style.display = "none";
            }
            var ZoombarId = 'OpenLayers_Control_PanZoomBar_Zoombar' + map.id;
            if (ZoombarId) {
                var divZoomBar = document.getElementById(ZoombarId);
                if (divZoomBar) {
                    divZoomBar.style.display = "none";
                }
            }
        }
    }
}


 