<!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="../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("../theme/default/img/draw_line_on.png");
height: 22px;
width: 24px;
top: 5px;
}
.olControlPanel .olControlDrawFeatureItemInactive span:first-child {
background-image: url("../theme/default/img/draw_line_off.png");
height: 22px;
width: 24px;
top: 5px;
}
.olControlPanel .olControlZoomBoxItemInactive span:first-child {
background-image: url("../img/drag-rectangle-off.png");
height: 29px;
width: 29px;
top: 2px;
}
.olControlPanel .olControlZoomBoxItemActive span:first-child {
background-image: url("../img/drag-rectangle-on.png");
height: 29px;
width: 29px;
top: 2px;
}
.olControlPanel .olControlZoomToMaxExtentItemInactive span:first-child {
background-image: url("../img/zoom-world-mini.png");
height: 18px;
width: 18px;
top: 8px;
}
.olControlPanel .navHistory span:first-child {
background-image: url("../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="../lib/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>
