[GIS] How to change CSS style for panZoomBar

openlayers-2

How do I change or add the CSS style for panZoomBar?

I.e. to change the panup, pandown, panleft, etc hover in CSS by attaching the class in CSS for those… and which class should I create it in…

Best Answer

i got the answer for my own question partially one month back but i forgot to post it here so that others can make use of it...... i have done the panzoombar changes using css it self with some changes javascript...........

.olControlPanup {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-44px -22px;
  position:relative;
  height:25px;
  width:42px;
  left:5px;
  top:-1px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.olControlPanup:hover {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-44px 0px;
  position:relative;
  height:25px;
  width:42px;
  left:5px;
  top:-1px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.olControlPandown {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-42px -79px;
  position:relative;
  height:25px;
  width:42px;
  left:4px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.olControlPandown:hover {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-42px -101px;
  position:relative;
  height:25px;
  width:42px;
  left:4px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.olControlPanleft {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-24px -39px;
  position:relative;
  height:44px;
  width:25px;
  left:5px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.olControlPanleft:hover {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-2px -39px;
  position:relative;
  height:44px;
  width:25px;
  left:5px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.olControlPanright {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-82px -41px;
  position:relative;
  height:42px;
  width:25px;
  left:5px;
  border-bottom-left-radius: 15px;
  border-top-left-radius: 20px;
}

.olControlPanright:hover {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-104px -41px;
  position:relative;
  height:42px;
  width:25px;
  left:5px;
  border-bottom-left-radius: 15px;
  border-top-left-radius: 20px;
}

.olControlZoomin {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:0px -14px;
  height:24px;
  width:25px;
}

.olControlZoomin:hover {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:0px 167px;
  height:24px;
  width:25px;
}

.olControlZoomout {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-102px -273px;
  height:24px;
  width:23px;
}

.olControlZoomout:hover {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-104px -100px;
  height:24px;
  width:23px;
}

.olControlSlider {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-133px -244px;
  height:9px;
  width:25px;
}

.olControlZoombar {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-134px -140px;
  width:25px;
}

- JAVASCRIPT

  var panZoomBar = new OpenLayers.Control.PanZoomBar();
  this.map.addControl( panZoomBar );
  panZoomBar.buttons[0].innerHTML = "<div class=olControlPanup ></div>";
  panZoomBar.buttons[1].innerHTML = "<div class=olControlPanleft ></div>";
  panZoomBar.buttons[2].innerHTML = "<div class=olControlPanright ></div>";
  panZoomBar.buttons[3].innerHTML = "<div class=olControlPandown ></div>";
  panZoomBar.buttons[4].innerHTML = "<div class=olControlZoomin ></div>";
  panZoomBar.buttons[5].innerHTML = "<div class=olControlZoomout ></div>";
  panZoomBar.slider.innerHTML = "<div class=olControlSlider ></div>";
  panZoomBar.zoombarDiv.style.backgroundImage = "";
  panZoomBar.zoombarDiv.style.width = "";
  panZoomBar.zoombarDiv.className = "olControlZoombar";

this code is slit lengthier one but it can be made simpler in more ways........

thanks for ur help peoples .....

Related Question