1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Custom and accessible panel</title>
<link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
.olControlPanel button {
position: relative;
display: block;
margin: 2px;
border: 1px solid;
padding: 0 5px;
border-radius: 4px;
height: 35px;
background-color: white;
float: left;
overflow: visible; /* needed to remove padding from buttons in IE */
}
.olControlPanel button span {
padding-left: 25px;
}
.olControlPanel button span:first-child {
padding-left: 0;
display: block;
position: absolute;
left: 2px;
}
.olControlPanel .olControlDrawFeatureItemActive span:first-child {
background-image: url("openlayers/theme/default/img/draw_line_on.png");
height: 22px;
width: 24px;
top: 5px;
}
.olControlPanel .olControlDrawFeatureItemInactive span:first-child {
background-image: url("openlayers/theme/default/img/draw_line_off.png");
height: 22px;
width: 24px;
top: 5px;
}
.olControlPanel .olControlZoomBoxItemInactive span:first-child {
background-image: url("openlayers/img/drag-rectangle-off.png");
height: 29px;
width: 29px;
top: 2px;
}
.olControlPanel .olControlZoomBoxItemActive span:first-child {
background-image: url("openlayers/img/drag-rectangle-on.png");
height: 29px;
width: 29px;
top: 2px;
}
.olControlPanel .olControlZoomToMaxExtentItemInactive span:first-child {
background-image: url("openlayers/img/zoom-world-mini.png");
height: 18px;
width: 18px;
top: 8px;
}
.olControlPanel .navHistory span:first-child {
background-image: url("openlayers/theme/default/img/navigation_history.png");
height: 24px;
width: 24px;
top: 4px;
}
.olControlPanel .navHistoryPreviousItemActive span:first-child {
background-position: 0 0;
}
.olControlPanel .navHistoryPreviousItemInactive span:first-child {
background-position: 0 -24px;
}
.olControlPanel .navHistoryNextItemActive span:first-child {
background-position: -24px 0;
}
.olControlPanel .navHistoryNextItemInactive span:first-child {
background-position: -24px -24px;
}
</style>
<script src="openlayers/OpenLayers.js"></script>
<script src="accessible-panel.js"></script>
</head>
<body onload="init()">
<h1 id="title">Custom and accessible panel</h1>
<div id="tags">
panels, CSS, style, accessibility, button
</div>
<p id="shortdesc">
Create a custom and accessible panel, styled entirely with
CSS.
</p>
<div id="panel"></div>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>An accessible panel:
<ul>
<li>The buttons are actual HTML buttons. You can therefore
use the TAB key to give the focus to the panel's buttons, and the "ENTER"
key to activate or trigger the corresponding control.</li>
<li>The buttons include text and titles (displayed when a button
is hovered).</li>
<li>If you remove colors from the page (for example using FireFox's <a
href="https://addons.mozilla.org/en-US/firefox/addon/no-color/">No
Color extension</a>) the buttons are still visible, and
accessible using the keyboard.</li>
</ul>
</p>
<p>By default a panel creates buttons as divs. In this example the
<code>createControlMarkup</code> panel function is overridden to create
a more accessible markup for the buttons. See the <a
href="accessible-panel.js" target="_blank"> accessible-panel.js
source</a> to see how this is done.</p>
<p>Note: in IE 8, when a button is pressed its content shifts by 1 pixel.
This is a <a
href="http://labs.findsubstance.com/2009/05/21/ie8-form-button-with-background-image-on-click-css-bug/">known
IE8 bug</a>, with known workarounds. No workaround is applied in this
example though.</p>
</div>
</body>
</html>
|
