diff --git a/examples/dragzoom.html b/examples/dragzoom.html
index 0cd64bb6c1..18becc24fe 100644
--- a/examples/dragzoom.html
+++ b/examples/dragzoom.html
@@ -32,8 +32,9 @@
 
         <div class="span12">
           <h4 id="title">DragZoom example</h4>
-          <p id="shortdesc">Example of dragzoom interaction</p>
+          <p id="shortdesc">Example of dragzoom interaction.</p>
           <div id="docs">
+            <p>Press SHIFT and drag the map to trigger the interaction.</p>
             <p>See the <a href="dragzoom.js" target="_blank">dragzoom.js source</a> to see how this is done.</p>
             <p>For the moment, only works with the <strong>canvas</strong> renderer.</p>
           </div>
diff --git a/examples/dragzoom.js b/examples/dragzoom.js
index 86d83114d4..0b91dacbdb 100644
--- a/examples/dragzoom.js
+++ b/examples/dragzoom.js
@@ -1,12 +1,29 @@
 goog.require('ol.Map');
 goog.require('ol.RendererHint');
 goog.require('ol.View2D');
+goog.require('ol.interaction');
 goog.require('ol.interaction.DragZoom');
 goog.require('ol.layer.Tile');
 goog.require('ol.source.OSM');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
 
 
 var map = new ol.Map({
+  interactions: ol.interaction.defaults().extend([
+    new ol.interaction.DragZoom({
+      style: new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          color: 'rgba(255,0,0,1)',
+          width: 2
+        }),
+        fill: new ol.style.Fill({
+          color: 'rgba(155,0,0,0.2)'
+        })
+      })
+    })
+  ]),
   layers: [
     new ol.layer.Tile({
       source: new ol.source.OSM()
@@ -19,6 +36,3 @@ var map = new ol.Map({
     zoom: 2
   })
 });
-
-var dragzoom = new ol.interaction.DragZoom();
-map.addInteraction(dragzoom);