diff --git a/lib/OpenLayers/Handler/Box.js b/lib/OpenLayers/Handler/Box.js index 6a065e8101..c5e4e4b9d2 100644 --- a/lib/OpenLayers/Handler/Box.js +++ b/lib/OpenLayers/Handler/Box.js @@ -21,6 +21,13 @@ OpenLayers.Handler.Box = OpenLayers.Class(OpenLayers.Handler, { */ dragHandler: null, + /** + * APIProperty: boxDivClassName + * {String} The CSS class to use for drawing the box. Default is + * olHandlerBoxZoomBox + */ + boxDivClassName: 'olHandlerBoxZoomBox', + /** * Constructor: OpenLayers.Handler.Box * @@ -62,15 +69,8 @@ OpenLayers.Handler.Box = OpenLayers.Class(OpenLayers.Handler, { */ startBox: function (xy) { this.zoomBox = OpenLayers.Util.createDiv('zoomBox', - this.dragHandler.start, - null, - null, - "absolute", - "2px solid red"); - this.zoomBox.style.backgroundColor = "white"; - this.zoomBox.style.filter = "alpha(opacity=50)"; // IE - this.zoomBox.style.opacity = "0.50"; - this.zoomBox.style.fontSize = "1px"; + this.dragHandler.start); + this.zoomBox.className = this.boxDivClassName; this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1; this.map.viewPortDiv.appendChild(this.zoomBox); diff --git a/theme/default/style.css b/theme/default/style.css index 958535b097..7d3b4fdb3e 100644 --- a/theme/default/style.css +++ b/theme/default/style.css @@ -159,3 +159,12 @@ div.olControlMousePosition { background-image: url("img/draw_polygon_on.png"); background-repeat: no-repeat; } + +.olHandlerBoxZoomBox { + border: 2px solid red; + position: absolute; + background-color: white; + opacity: 0.50; + font-size: 1px; + filter: alpha(opacity=50); +}