diff --git a/examples/zoom.html b/examples/zoom.html
index e5a579e11e..7b15297d05 100644
--- a/examples/zoom.html
+++ b/examples/zoom.html
@@ -12,6 +12,31 @@
                 bottom: 5px;
                 font-size: 9px;
             }
+            #customZoom {
+                z-index: 1001;
+                position: relative;
+                top: 10px;
+                left: 10px;
+            }
+            #customZoom a {
+                text-decoration: none;
+                position: absolute;
+                display: block;
+                width: 50px;
+                text-align: center;
+                font-weight: bold;
+                color: #fff;
+                background: #369;
+                border: 1px solid #ccc;
+                border-radius: 3px;
+            }
+            #customZoom a:hover {
+                background: #036;
+            }
+            #customZoomOut {
+                top: 25px;
+            }
+            
         </style>
     </head>
     <body>
@@ -21,6 +46,14 @@
         <div id="shortdesc">Shows how to use a simple zoom control.</div>
 
         <div id="map" class="smallmap"></div>
+        <p>The map above uses the default control configuration and style.</p>
+        <p>The map below uses the custom zoom elements and styling.</p>
+        <div id="map2" class="smallmap">
+            <div id="customZoom">
+                <a href="#customZoomIn" id="customZoomIn">in</a>
+                <a href="#customZoomIn" id="customZoomOut">out</a>
+            </div>
+        </div>
 
         <div id="docs">
             <p>This example demonstrates the use of a Zoom control.</p>
diff --git a/examples/zoom.js b/examples/zoom.js
index e3dc2a8b45..08694ccad4 100644
--- a/examples/zoom.js
+++ b/examples/zoom.js
@@ -7,8 +7,28 @@ var map = new OpenLayers.Map({
                 enableKinetic: true
             }
         }),
+        new OpenLayers.Control.Attribution(),
         new OpenLayers.Control.Zoom()
     ],
     center: [0, 0],
     zoom: 1
 });
+
+var map2 = new OpenLayers.Map({
+    div: "map2",
+    layers: [new OpenLayers.Layer.OSM()],
+    controls: [
+        new OpenLayers.Control.Navigation({
+            dragPanOptions: {
+                enableKinetic: true
+            }
+        }),
+        new OpenLayers.Control.Attribution(),
+        new OpenLayers.Control.Zoom({
+            zoomInId: "customZoomIn",
+            zoomOutId: "customZoomOut"
+        })
+    ],
+    center: [0, 0],
+    zoom: 1
+});
diff --git a/lib/OpenLayers/Control/Zoom.js b/lib/OpenLayers/Control/Zoom.js
index 19ca4532a0..992693637a 100644
--- a/lib/OpenLayers/Control/Zoom.js
+++ b/lib/OpenLayers/Control/Zoom.js
@@ -54,8 +54,7 @@ OpenLayers.Control.Zoom = OpenLayers.Class(OpenLayers.Control, {
      * Method: draw
      *
      * Returns:
-     * {DOMElement} A reference to the DIV DOMElement containing the 
-     *     switcher tabs.
+     * {DOMElement} A reference to the DOMElement containing the zoom links.
      */
     draw: function() {
         var div = OpenLayers.Control.prototype.draw.apply(this),
@@ -81,7 +80,8 @@ OpenLayers.Control.Zoom = OpenLayers.Class(OpenLayers.Control, {
      * {Object} Object with zoomIn and zoomOut properties referencing links.
      */
     getOrCreateLinks: function(el) {
-        var zoomIn = document.getElementById(this.zoomInId);
+        var zoomIn = document.getElementById(this.zoomInId),
+            zoomOut = document.getElementById(this.zoomOutId);
         if (!zoomIn) {
             zoomIn = document.createElement("a");
             zoomIn.href = "#zoomIn";
@@ -89,7 +89,6 @@ OpenLayers.Control.Zoom = OpenLayers.Class(OpenLayers.Control, {
             zoomIn.className = "olControlZoomIn";
             el.appendChild(zoomIn);
         }
-        var zoomOut = document.getElementById(this.zoomOutId);
         if (!zoomOut) {
             zoomOut = document.createElement("a");
             zoomOut.href = "#zoomOut";
