Geht mir auch so.
Zum Anpassen gibt es zwei Möglichkeiten:
- Das alte PanZoom Control wieder einbinden
Am einfachsten ist vermutlich, die default controls zu entfernen und manuell hinzuzufügen, mit Control.PanZoom (oder eben PanZoomBar) statt des neuen Control.Zoom:
map = new OpenLayers.Map({
div: "map",
projection: "EPSG:900913",
controls: []
});
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.PanZoom());
map.addControl(new OpenLayers.Control.ArgParser());
map.addControl(new OpenLayers.Control.Attribution());
- Den CSS Style des Control.Zoom anpassen
Das Zoom Control Example zeigt, wie man die Zoom Buttons komplett austauschen kann, inklusive Text.
Es reicht aber auch, die Farbe der CSS Styles (siehe style.css) zu überschreiben:
<style type="text/css">
div.olControlZoom a {
background: #00008B !important; /* fallback for IE - IE6 requires background shorthand*/
background: rgba(0, 0, 139, 1.0) !important;
filter: alpha(opacity=100) !important;
}
div.olControlZoom a:hover {
background: #00008B !important; /* fallback for IE */
background: rgba(0, 0, 139, 0.7) !important;
filter: alpha(opacity=70) !important;
}
@media only screen and (max-width: 600px) {
div.olControlZoom a:hover {
background: rgba(0, 0, 139, 0.5) !important;
}
}
</style>
Gruß,
Norbert