openseadragon/www/ui-toolbar.html

<h2>example: toolbar</h2>

<div class="description">
    <p>
    Although OpenSeadragon provides default buttons which are overlayed on the Viewport,
    there are many use cases where the presentation may require a more traditional
    'toolbar'.  OpenSeadragon now allows you to very simply dock your controls 
    inside any element on the page which the end user has presentation control over.
    </p>
</div>

<div class="demoarea">
    <div class="demoheading">
        Toolbar
    </div>
    <div id="toolbarDiv" class="toolbar">
        <span style='float:right;margin:10px 20px 0 0'>
        | <a href="#">other tools</a> 
        | <a href="#">other tools</a> 
        </span>
    </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",
        toolbar:       "toolbarDiv",
        showNavigator: true
    });
</script>

<p>
Most importantly the toolbar has additional logic which supports transitions between
fullpage and normal mode.  The user can style, including hiding, the toolbar in fullpage
mode, even though its not otherwise related to the viewer / viewport DOM.
</p>