use button elements instead of anchor elements and add tooltips to zoomcontrol

This commit is contained in:
Mark Prins
2014-02-15 10:38:14 +01:00
committed by Antoine Abt
parent 9adf8b01f6
commit 18c2ffe522
2 changed files with 13 additions and 11 deletions

View File

@@ -178,7 +178,7 @@ a.ol-full-screen-true:after {
} }
/* invisible but not hidden */ /* invisible but not hidden */
.olHasToolTip span, .olHasTooltip_b_r span { .olHasToolTip span, .olHasToolTip_b_r span {
position: absolute; position: absolute;
clip: rect(1px 1px 1px 1px); /* < IE8 */ clip: rect(1px 1px 1px 1px); /* < IE8 */
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
@@ -193,7 +193,7 @@ a.ol-full-screen-true:after {
/* show a tooltip offset to below and right */ /* show a tooltip offset to below and right */
.olHasToolTip:hover span, .olHasToolTip:focus span , .olHasToolTip:hover span, .olHasToolTip:focus span ,
.olHasTooltip_b_r:hover span , .olHasTooltip_b_r:focus span { .olHasToolTip_b_r:hover span , .olHasToolTip_b_r:focus span {
clip: auto; clip: auto;
padding: 3px; padding: 3px;
height: auto; height: auto;

View File

@@ -38,26 +38,28 @@ ol.control.Zoom = function(opt_options) {
options.zoomOutLabel : '\u2212'; options.zoomOutLabel : '\u2212';
var tTipZoomIn = goog.dom.createDom(goog.dom.TagName.SPAN, { var tTipZoomIn = goog.dom.createDom(goog.dom.TagName.SPAN, {
'class':'', 'class': '',
'role':'tooltip' 'role' : 'tooltip'
},"Zoom in"); }, 'Zoom in');
var inElement = goog.dom.createDom(goog.dom.TagName.BUTTON, { var inElement = goog.dom.createDom(goog.dom.TagName.BUTTON, {
'class': className + '-in olHasToolTip', 'class': className + '-in olHasToolTip',
'name' : 'zoomIn' 'name' : 'ZoomIn',
'type' : 'button'
}, tTipZoomIn, zoomInLabel); }, tTipZoomIn, zoomInLabel);
goog.events.listen(inElement, [ goog.events.listen(inElement, [
goog.events.EventType.TOUCHEND, goog.events.EventType.TOUCHEND,
goog.events.EventType.CLICK goog.events.EventType.CLICK
], goog.partial(ol.control.Zoom.prototype.zoomByDelta_, delta), false, this); ], goog.partial(ol.control.Zoom.prototype.zoomByDelta_, delta), false, this);
var tTipsZoomOut = goog.dom.createDom(goog.dom.TagName.SPAN, { var tTipsZoomOut = goog.dom.createDom(goog.dom.TagName.SPAN, {
'class':'', 'class': '',
'role':'tooltip' 'role' : 'tooltip',
}, "Zoom out"); 'type' : 'button'
}, 'Zoom out');
var outElement = goog.dom.createDom(goog.dom.TagName.BUTTON, { var outElement = goog.dom.createDom(goog.dom.TagName.BUTTON, {
'class': className + '-out olHasToolTip', 'class': className + '-out olHasToolTip',
'name' : 'zoomOut' 'name' : 'ZoomOut'
}, tTipsZoomOut, zoomOutLabel); }, tTipsZoomOut, zoomOutLabel);
goog.events.listen(outElement, [ goog.events.listen(outElement, [
goog.events.EventType.TOUCHEND, goog.events.EventType.TOUCHEND,