From b76edb8833b84e4af1ee1c862597f77b786b1222 Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim.schaub@gmail.com>
Date: Mon, 10 Sep 2007 17:18:52 +0000
Subject: [PATCH] putting up a basic non-slippy example

git-svn-id: http://svn.openlayers.org/trunk/openlayers@4202 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
---
 examples/accessible.html | 124 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 124 insertions(+)
 create mode 100644 examples/accessible.html
diff --git a/examples/accessible.html b/examples/accessible.html
new file mode 100644
index 0000000000..d0ca058719
--- /dev/null
+++ b/examples/accessible.html
@@ -0,0 +1,124 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <style type="text/css">
+            #map {
+                width: 512px;
+                height: 256px;
+                border: 1px solid #eee;
+            }
+            table {
+                border: 1 px solid white;
+                padding: 0;
+            }
+            td {
+                text-align: center;
+            }
+            a {
+                text-decoration: none;
+                font-size: 1.2em;
+            }
+            a em {
+                font-style: normal;
+                font-weight: normal;
+                text-decoration: underline;
+            }            
+            a:hover {
+                text-decoration: underline;
+            }         
+        </style>
+        <script src="../lib/OpenLayers.js"></script>
+        <script type="text/javascript">
+            var map = null;
+            function init(){
+                var options = {
+                    controls: [new OpenLayers.Control.KeyboardDefaults()]
+                };
+                map = new OpenLayers.Map('map', options);
+                var wms = new OpenLayers.Layer.WMS(
+                    "OpenLayers WMS", 
+                    "http://labs.metacarta.com/wms/vmap0?",
+                    {layers: 'basic'}
+                );
+                map.addLayer(wms);
+                map.zoomToMaxExtent();
+            }
+        </script>
+    </head>
+    <body onload="init()">
+        <h3>OpenLayers Example</h3>
+        <table>
+            <tbody>
+                <tr>
+                    <td>
+                        <a href="javascript: void map.zoomOut();"
+                           accesskey="o">
+                            zoom <em>o</em>ut
+                        </a>
+                    </td>
+                    <td>
+                        <a href="javascript: void map.pan(0, -map.getSize().h / 4);"
+                           accesskey="n">
+                            pan <em>n</em>orth
+                        </a>
+                    </td>
+                    <td>
+                        <a href="javascript: void map.zoomIn();"
+                           accesskey="i">
+                            zoom <em>i</em>n
+                        </a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <a href="javascript: void map.pan(-map.getSize().w / 4, 0);"
+                           accesskey="w">
+                            pan <em>w</em>est
+                        </a>
+                    </td>
+                    <td id="map"></td>
+                    <td>
+                        <a href="javascript: void map.pan(map.getSize().w / 4, 0);"
+                           accesskey="e">
+                            pan <em>e</em>ast
+                        </a>
+                    </td>
+                </tr>
+                <tr>
+                    <td>&nbsp;</td>
+                    <td>
+                        <a href="javascript: void map.pan(0, map.getSize().h / 4);"
+                           accesskey="s">
+                            pan <em>s</em>outh
+                        </a>
+                    </td>
+                    <td>&nbsp;</td>
+                </tr>
+            </tbody>
+        </table>
+        <p>Navigate the map in one of three ways:
+            <ul>
+                <li>Click on the named links to zoom and pan</li>
+                <li>Use following keys to pan and zoom:
+                    <ul>
+                        <li>+ (zoom in)</li>
+                        <li>- (zoom out)</li>
+                        <li>up-arrow (pan north)</li>
+                        <li>down-arrow (pan south)</li>
+                        <li>left-arrow (pan east)</li>
+                        <li>right-arrow (pan west)</li>
+                    </ul>
+                </li>
+                <li>If access keys work for links in your browser, use:
+                    <ul>
+                        <li>i (zoom in)</li>
+                        <li>o (zoom out)</li>
+                        <li>n (pan north)</li>
+                        <li>s (pan south)</li>
+                        <li>e (pan east)</li>
+                        <li>w (pan west)</li>
+                    </ul>
+                </li>
+            </ul>
+        </p>
+    </body>
+</html>

+ + zoom out + +	+ + pan north + +	+ + zoom in + +
+ + pan west + +		+ + pan east + +
	+ + pan south + +