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...
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It only takes a minute to sign up.
Sign up to join this communityHow 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...
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;
}
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 .....
Raghu please be specific in your tag selection. Your question is not related to 3 out of 5 tags you have used!
In order to change your panZoomBar style, you will have to use
.olControlPanPanel
class in your css file. The default style is defined in theme/default/style.css file.
Possible duplicate https://stackoverflow.com/questions/4254228/openlayers-pan-zoom-bar-modification