diff --git a/examples/navigation-history.html b/examples/navigation-history.html
index 8c07024dba..fce76f2436 100644
--- a/examples/navigation-history.html
+++ b/examples/navigation-history.html
@@ -17,18 +17,7 @@
         <script type="text/javascript">
             var map, nav, panel;
 
-            // preload images if you care
-            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(){
+            function init() {
                 map = new OpenLayers.Map('map');
 
                 nav = new OpenLayers.Control.NavigationHistory();
@@ -48,8 +37,6 @@
                 );
                 map.addLayer(layer);
                 map.zoomToMaxExtent();
-
-
             }
         </script>
     </head>
diff --git a/lib/OpenLayers/Control/NavigationHistory.js b/lib/OpenLayers/Control/NavigationHistory.js
index 1dace12aa9..e9e782b72d 100644
--- a/lib/OpenLayers/Control/NavigationHistory.js
+++ b/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);
diff --git a/theme/default/img/navigation_history.png b/theme/default/img/navigation_history.png
new file mode 100644
index 0000000000..053d1e0d26
Binary files /dev/null and b/theme/default/img/navigation_history.png differ
diff --git a/theme/default/style.css b/theme/default/style.css
index 1b0bcf3bd2..7f4d4fa3cc 100644
--- a/theme/default/style.css
+++ b/theme/default/style.css
@@ -128,29 +128,24 @@ div.olControlMousePosition {
   position: relative;
 }
 
-.olControlNavigationHistoryPreviousItemActive { 
-   background-image: url("img/view_previous_on.png");
+.olControlNavigationHistory {
+   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-repeat: no-repeat;
-   width:  24px;
-   height: 24px;
+   background-position: 0px -24px;
 }
 .olControlNavigationHistoryNextItemActive { 
-   background-image: url("img/view_next_on.png");
-   background-repeat: no-repeat;
-   width:  24px;
-   height: 24px;
+   background-position: -24px 0px;
 }
 .olControlNavigationHistoryNextItemInactive { 
-   background-image: url("img/view_next_off.png");
-   background-repeat: no-repeat;
-   width:  24px;
-   height: 24px;
+   background-position: -24px -24px;
 }
 
 .olControlNavToolbar .olControlNavigationItemActive {