<div dir="ltr">Hi all,
<br><br>      I work on  to customize the control like panzoombar in the
 openlayers 2.12. where i found all the controls like 
pan-left,right,up,down and zoomin,zoomout,slider,zoombar where images 
and functions on the images .okay here i had an issue with zoombar and 
the slider.The zoombar image i loaded by editing the ..//img/ directory 
images in the openlayers.  i gave the slider size with as i want but 
when it load it get small size to fit with the old zoombar with 
zoomlevel separation[too small]. I tried with the method subclassing the
 our own class to the controls for the customization.here is my code 
sample.And with reference to this code i worked on:
<br><br>var panZoomBar = new OpenLayers.Control.PanZoomBar({
<br>    panIcons: false // my custom option I use to hide the pan buttons
<br>});
<br>OpenLayers.Util.extend(panZoomBar, {
<br>    draw: function(px) {
<br>        // initialize our internal div
<br>        OpenLayers.Control.prototype.draw.apply(this, arguments);
<br>        px = this.position.clone();
<br><br>        // place the controls
<br>        this.buttons = [];
<br><br>        var sz = {w: 18, h: 18};
<br>        if (this.panIcons) { // will only draw our pan tools if this option is configured
<br>            var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);
<br>            var wposition = sz.w;
<br><br>            if (this.zoomWorldIcon) {
<br>                centered = new OpenLayers.Pixel(px.x+sz.w, px.y);
<br>            }
<br><br>            this._addButton("panup", "north-mini.png", centered, sz);
<br>            px.y = centered.y+sz.h;
<br>            this._addButton("panleft", "west-mini.png", px, sz);
<br>            if (this.zoomWorldIcon) {
<br>                this._addButton("zoomworld", "zoom-world-mini.png", px.add(sz.w, 0), sz);
<br><br>                wposition *= 2;
<br>            }
<br>            this._addButton("panright", "east-mini.png", px.add(wposition, 0), sz);
<br>            this._addButton("pandown", "south-mini.png", centered.add(0, sz.h*2), sz);
<br>            this._addButton("zoomin", "gmaps-zoom-plus-mini.png", centered.add(0, sz.h*3+5), sz);
<br>            centered = this._addZoomBar(centered.add(0, sz.h*4 + 5));
<br>            this._addButton("zoomout", "gmaps-zoom-minus-mini.png", centered, sz);
<br>        }
<br>        else {
<br>            this._addButton("zoomin", "gmaps-zoom-plus-mini.png", px, sz);
<br>            centered = this._addZoomBar(px.add(0, sz.h));
<br>            this._addButton("zoomout", "gmaps-zoom-minus-mini.png", centered, sz);
<br>            if (this.zoomWorldIcon) {
<br>                centered = centered.add(0, sz.h+3);
<br>                this._addButton("zoomworld", "zoom-world-mini.png", centered, sz);
<br>            }
<br>        }
<br>        // add custom CSS styles
<br>        $(this.slider).find('img').attr('src', media_url + 'OpenLayers-2.12/img/gmaps-slider.png');
<br>        $(this.zoombarDiv).css('background-image', 'url("' + media_url + 'OpenLayers-2.12/img/gmaps-zoombar.png")');
<br>        return this.div;
<br>    }
<br>});
<br><br>map.addControl(panZoomBar);
<br><br>please help me out to find out this solutions or is there any 
other best method to get our customized panzoombar in the openlayers.
<br><br><br><br><br clear="all"><br>-- <br>with Regards,<div>Ashokkumar</div>
</div>