openseadragon/www/ui-viewport-navigator.html

<h2>example: viewport navigator</h2>

<div class="description">
    <p>
    A viewport navigator allows the user to see the source image displayed
    as a reference image with a highlighted area showing which portion of
    the image they are currently viewing in the viewport. The navigator
    reuses the image sources provided by the viewport so no additional
    image derivatives are required. 
    </p>
</div>

<div class="demoarea">
    <div class="demoheading">
        Viewport Navigator
    </div>
    <div id="contentDiv" class="openseadragon"></div>
</div>

<script type="text/javascript">
    OpenSeadragon({
        id:            "contentDiv",
        prefixUrl:     "/openseadragon/images/",
        tileSources:   "/openseadragon/examples/images/highsmith/highsmith.dzi",
        showNavigator:  true
    });
</script>

<p><em>(The viewport navigator is up for promotion as a default interface 
element for accessibility reasons but could be disabled if required.)</em>
</p>
<p>Mouse interactions scroll (zoom) and drag are now supported on 
the navigator!
(New since 0.9.40) 
</p>
<p>
The viewport navigator is now keyboard acessible! Just tab into it,
the highlight will change to blue-ish, and you can use the following keys:
</p>
<ul>
    <li><strong>[ w, up arrow ]</strong> - move viewport <strong>up</strong></li>
    <li><strong>[ s, down arrow ]</strong> - move viewport <strong>down</strong></li>
    <li><strong>[ a, left arrow ]</strong> - move viewport <strong>left</strong></li>
    <li><strong>[ f, right arrow ]</strong> - move viewport <strong>right</strong></li>
    <li><strong>[ 0 ]</strong> - zoom / move viewport <strong>home</strong></li>
    <li><strong>[ - / _, shift+W, shift+up arrow ]</strong> - zoom viewport <strong>out</strong></li>
    <li><strong>[ = / +, shift+S, shift+down arrow ]</strong> - zoom viewport <strong>in</strong></li>
</ul>
<p>
<em>* NOTE: Chrome and Safari do not support the arrow keys for the Navigator.</em>
</p>