Use css sprites technique to simplify the NavigationHistory controls. r=tschaub. (Closes #1555)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@7422 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

examples/navigation-history.html

@@ -17,18 +17,7 @@
         <script type="text/javascript">
             var map, nav, panel;
 
-            // preload images if you care
+            function init() {
-            var preload = [
-                "../theme/default/img/view_previous_on.png",
-                "../theme/default/img/view_next_on.png"
-            ];
-            var img = new Array(preload.length);
-            for(var i=0; i<preload.length; ++i) {
-                img[i] = new Image();
-                img[i].src = preload[i];
-            }
-            
-            function init(){
                 map = new OpenLayers.Map('map');
 
                 nav = new OpenLayers.Control.NavigationHistory();
@@ -48,8 +37,6 @@
                 );
                 map.addLayer(layer);
                 map.zoomToMaxExtent();
-
-
             }
         </script>
     </head>

lib/OpenLayers/Control/NavigationHistory.js

@@ -137,14 +137,14 @@ OpenLayers.Control.NavigationHistory = OpenLayers.Class(OpenLayers.Control, {
 
         var previousOptions = {
             trigger: OpenLayers.Function.bind(this.previousTrigger, this),
-            displayClass: this.displayClass + "Previous"
+            displayClass: this.displayClass + " " + this.displayClass + "Previous"
         };
         OpenLayers.Util.extend(previousOptions, this.previousOptions);
         this.previous = new OpenLayers.Control.Button(previousOptions);
         
         var nextOptions = {
             trigger: OpenLayers.Function.bind(this.nextTrigger, this),
-            displayClass: this.displayClass + "Next"
+            displayClass: this.displayClass + " " + this.displayClass + "Next"
         };
         OpenLayers.Util.extend(nextOptions, this.nextOptions);
         this.next = new OpenLayers.Control.Button(nextOptions);

theme/default/style.css

@@ -128,29 +128,24 @@ div.olControlMousePosition {
   position: relative;
 }
 
-.olControlNavigationHistoryPreviousItemActive { 
+.olControlNavigationHistory {
-   background-image: url("img/view_previous_on.png");
+   background-image: url("img/navigation_history.png");
    background-repeat: no-repeat;
    width:  24px;
    height: 24px;
+
+}
+.olControlNavigationHistoryPreviousItemActive { 
+  background-position: 0px 0px;
 }
 .olControlNavigationHistoryPreviousItemInactive { 
-   background-image: url("img/view_previous_off.png");
+   background-position: 0px -24px;
-   background-repeat: no-repeat;
-   width:  24px;
-   height: 24px;
 }
 .olControlNavigationHistoryNextItemActive { 
-   background-image: url("img/view_next_on.png");
+   background-position: -24px 0px;
-   background-repeat: no-repeat;
-   width:  24px;
-   height: 24px;
 }
 .olControlNavigationHistoryNextItemInactive { 
-   background-image: url("img/view_next_off.png");
+   background-position: -24px -24px;
-   background-repeat: no-repeat;
-   width:  24px;
-   height: 24px;
 }
 
 .olControlNavToolbar .olControlNavigationItemActive {