Switching sytles of the Pan/Zoom Bar Images

[Clint1]

Hi,

I have a requirement in my application to change the styles and images for the zoom and pan controls.  I'm currenlty using the javascript routine below which works well for most of the images.  However the zoom slider seems to always have a different id each time the user clicks the plus or minus button so I don't know how to programatically change it.  How would I accomplish this?

function updateImages() {

 
        var img = document.getElementById('PanZoomBar_zoomin_innerImage');
 
        if (img)
        {
            img.setAttribute('src', '/theme/default/img/zoom_plus_mini.png');
            img.setAttribute('style','position: relative; height: 22px; width: 23px;');
            }
        else {
            setTimeout(updateImages, 250);
            return;
        }
 
        img = document.getElementById('PanZoomBar_zoomout_innerImage');
        if (img) {
            img.setAttribute('src', '/theme/default/img/zoom_minus_mini.png');
            img.setAttribute('style', 'position: relative; width: 22px; height: 23px;');
        }
        else {
            setTimeout(updateImages, 250);
            return;
        }
 
        img = document.getElementById('PanZoomBar_pandown_innerImage');
        if (img) {
            img.setAttribute('src', '/theme/default/img/south_mini.png');
            //img.setAttribute('style', '');
        }
        else {
            setTimeout(updateImages, 250);
            return;
        }
        
        img = document.getElementById('PanZoomBar_panup_innerImage');
        if (img) {
            img.setAttribute('src', '/theme/default/img/north_mini.png');
            //img.setAttribute('style', '');
        }
        else {
            setTimeout(updateImages, 250);
            return;
        }
        
        img = document.getElementById('PanZoomBar_panleft_innerImage');
        if (img) {
            img.setAttribute('src', '/theme/default/img/west_mini.png');
            //img.setAttribute('style', '');
        }
        else {
            setTimeout(updateImages, 250);
            return;
        }
        
        img = document.getElementById('PanZoomBar_panright_innerImage');
        if (img) {
            img.setAttribute('src', '/theme/default/img/east_mini.png');
            //img.setAttribute('style', '');
        }
        else {
            setTimeout(updateImages, 250);
            return;
        }
        
        img = document.getElementById('PanZoomBar_zoomworld_innerImage');
        if (img) {
            img.setAttribute('src', '/theme/default/img/zoom_world_mini.png');
           // img.setAttribute('style', '');
        }
        else {
            setTimeout(updateImages, 250);
            return;
        }
        
        img = document.getElementById('PanZoomBar_OpenLayers.Map_2_innerImage')
        if (img) {
            img.setAttribute('src', '/theme/default/img/slider.png')
            img.setAttribute('style', 'position: relative; width: 22px; height: 16px;');
        }
        else {
            setTimeout(updateImages, 250);
            return;
        }
 
        var div = document.getElementById('OpenLayers_Control_PanZoomBar_ZoombarOpenLayers.Map_2')
        if (div) {
            div.setAttribute('style', 'background-image: url(/theme/default/img/zoombar.png) !important; left: 25px !important; top: 81px; width: 16px !important; height: 110px; position: absolute;');
        }
        else {
            setTimeout(updateImages, 250);
            return;
        }
    }

 

Thanks!

[Ben]

Clint,

 The constitute rule of the ID is a bit different for ervery element of a PanZoomBar, here are some instructions:

      Slider:  panzoombar.id + '_' + map.id + '_innerImage'

      ZoomBar:    // Check whether it’s necessary to use the png alpha hack that allows alpha tansparency for png image

                  if (OpenLayers.Util.alphaHack()) {

                     zoombarId = panzoombar.id + "_" + map.id

                  }else{

                     ZoombarId = 'OpenLayers_Control_PanZoomBar_Zoombar' + map.id;

}

      The rest:  panzoombar.id + '_’ + fixedName + _innerImage'

Please have a look at the attached code for details, which runs fine in our test.

Thanks,

Ben

635-ChangeTheStyleOfPanZoomBar.txt (3.58 KB)