]> Shamusworld >> Repos - ardour-manual/blobdiff - include/about-ardours-interface.html
Replaced divs by imagemap in Ardours Interface Overview for maintainability and PDF...
[ardour-manual] / include / about-ardours-interface.html
index af69bd6615d2648f4f7f9cde157e42db18e9b893..b9e5d3fecf4073777dbbed732eb1793f1b606c1b 100644 (file)
@@ -5,74 +5,67 @@
 </p>
 
 <figure style="width:100%;">
+       <img src="/images/editor_map.png" alt="The Editor window" usemap="#editor_map" width="600" height="325">
+       <map name="editor_map">
+               <area shape="rect" coords="0,0,336,8" href="@@main-menu" />
+               <area shape="rect" coords="336,0,600,8" href="@@status-bar" />
+               <area shape="rect" coords="0,8,68,28" href="@@transport-bar" />
+               <area shape="rect" coords="68,8,108,28" href="@@selection-and-punch-clocks" />
+               <area shape="rect" coords="108,8,144,28" href="@@other-toolbar-items#monitor-options" />
+               <area shape="rect" coords="144,8,196,28" href="@@other-toolbar-items#latency-compensation-info" />
+               <area shape="rect" coords="196,8,228,28" href="@@other-toolbar-items#playhead_options" />
+               <area shape="rect" coords="228,8,348,28" href="@@transport-clocks" />
+               <area shape="rect" coords="348,8,368,28" href="@@other-toolbar-items#status_indicators" />
+               <area shape="rect" coords="368,8,384,28" href="@@other-toolbar-items#monitor_section_info" />
+               <area shape="rect" coords="384,8,428,28" href="@@selection-and-punch-clocks" />
+               <area shape="rect" coords="428,8,552,28" href="@@mini-timeline" />
+               <area shape="rect" coords="552,8,600,28" href="@@other-toolbar-items#mode_selector" />
+               <area shape="rect" coords="0,28,36,324" href="@@audiomidi-mixer-strips" />
+               <area shape="rect" coords="36,28,144,36" href="@@toolbox" />
+               <area shape="rect" coords="144,28,188,36" href="@@grid-controls" />
+               <area shape="rect" coords="188,28,240,36" href="@@nudge-controls" />
+               <area shape="rect" coords="516,28,600,36" href="@@zoom-controls" />
+               <area shape="rect" coords="476,36,600,60" href="@@selection-and-punch-clocks" />
+               <area shape="rect" coords="476,60,600,324" href="@@editor-lists" />
+               <area shape="rect" coords="36,36,476,76" href="@@ruler" />
+               <area shape="rect" coords="36,296,476,324" href="@@summary" />
+               <area shape="rect" coords="36,76,44,296" href="@@track-and-bus-groups" />
+               <area shape="rect" coords="44,136,476,156" href="@@audio-track-controls" />
+               <area shape="rect" coords="44,96,476,136" href="@@midi-track-controls" />
+               <area shape="rect" coords="44,156,476,176" href="@@automation" />
+               <area shape="rect" coords="44,176,476,196" href="@@audio-track-controls" />
+               <area shape="rect" coords="44,196,476,236" href="@@bus-controls" />
+               <area shape="rect" coords="44,236,476,296" href="@@control-masters-mixer-strips" />
+       </map>
 
-  <div class="container" style="float:left; width: 600px; height: 347px; margin-right:10px; margin-bottom:10px; background-image: url('/images/Split_Backgroundeditor.png');">
-                       <a href="@@main-menu"><div class="hoverimg" style="left: 0px; top: 11px; width: 297px; height: 13px; background-image: url('/images/Split_MainMenu.png');"></div></a>
-                       <a href="@@status-bar"><div class="hoverimg" style="left: 297px; top: 11px; width: 303px; height: 13px; background-image: url('/images/Split_StatusBar.png');"></div></a>
-                       <a href="@@transport-bar"><div class="hoverimg" style="left: 0px; top: 24px; width: 86px; height: 24px; background-image: url('/images/Split_Transport.png');"></div></a>
-                       <a href="@@selection-and-punch-clocks"><div class="hoverimg" style="left: 86px; top: 24px; width: 50px; height: 24px; background-image: url('/images/Split_RecordandPunchOptions.png');"></div></a>
-                       <a href="@@other-toolbar-items#monitor-options"><div class="hoverimg" style="left: 136px; top: 24px; width: 46px; height: 24px; background-image: url('/images/Split_MonitorOptions.png');"></div></a>
-                       <a href="@@other-toolbar-items#playhead_options"><div class="hoverimg" style="left: 182px; top: 24px; width: 43px; height: 24px; background-image: url('/images/Split_PlayheadOptions.png');"></div></a>
-                       <a href="@@transport-clocks"><div class="hoverimg" style="left: 225px; top: 24px; width: 154px; height: 24px; background-image: url('/images/Split_Clocks.png');"></div></a>
-                       <a href="@@other-toolbar-items#status_indicators"><div class="hoverimg" style="left: 379px; top: 24px; width: 23px; height: 24px; background-image: url('/images/Split_StatusIndicators.png');"></div></a>
-                       <a href="@@selection-and-punch-clocks"><div class="hoverimg" style="left: 402px; top: 24px; width: 55px; height: 24px; background-image: url('/images/Split_SelectionClock.png');"></div></a>
-                       <a href="@@mini-timeline"><div class="hoverimg" style="left: 457px; top: 24px; width: 90px; height: 24px; background-image: url('/images/Split_NavigationTimeline.png');"></div></a>
-                       <a href="@@other-toolbar-items#mode_selector"><div class="hoverimg" style="left: 547px; top: 24px; width: 53px; height: 24px; background-image: url('/images/Split_LevelModeScripts.png');"></div></a>
-                       <a href="@@audiomidi-mixer-strips"><div class="hoverimg" style="left: 0px; top: 48px; width: 43px; height: 299px; background-image: url('/images/Split_aMixerStrip.png');"></div></a>
-                       <a href="@@toolbox"><div class="hoverimg" style="left: 43px; top: 48px; width: 112px; height: 14px; background-image: url('/images/Split_Toolbox.png');"></div></a>
-                       <a href="@@zoom-controls"><div class="hoverimg" style="left: 155px; top: 48px; width: 111px; height: 14px; background-image: url('/images/Split_ZoomControls.png');"></div></a>
-                       <a href="@@grid-controls"><div class="hoverimg" style="left: 266px; top: 48px; width: 90px; height: 14px; background-image: url('/images/Split_GridControls.png');"></div></a>
-                       <a href="@@edit-point-control"><div class="hoverimg" style="left: 356px; top: 48px; width: 40px; height: 14px; background-image: url('/images/Split_EditPoint.png');"></div></a>
-                       <a href="@@nudge-controls"><div class="hoverimg" style="left: 396px; top: 48px; width: 61px; height: 14px; background-image: url('/images/Split_NudgeControls.png');"></div></a>
-                       <a href="@@selection-and-punch-clocks"><div class="hoverimg" style="left: 498px; top: 62px; width: 102px; height: 26px; background-image: url('/images/Split_SelectionandPunchClocks.png');"></div></a>
-                       <a href="@@editor-lists"><div class="hoverimg" style="left: 498px; top: 88px; width: 102px; height: 259px; background-image: url('/images/Split_EditorLists.png');"></div></a>
-                       <a href="@@ruler"><div class="hoverimg" style="left: 43px; top: 62px; width: 455px; height: 49px; background-image: url('/images/Split_Ruler.png');"></div></a>
-                       <a href="@@summary"><div class="hoverimg" style="left: 43px; top: 295px; width: 455px; height: 52px; background-image: url('/images/Split_Summary.png');"></div></a>
-                       <a href="@@track-and-bus-groups"><div class="hoverimg" style="left: 43px; top: 110px; width: 7px; height: 185px; background-image: url('/images/Split_GroupTabs.png');"></div></a>
-                       <a href="@@bus-controls"><div class="hoverimg" style="left: 50px; top: 110px; width: 448px; height: 26px; background-image: url('/images/Split_MasterBus.png');"></div></a>
-                       <a href="@@audio-track-controls"><div class="hoverimg" style="left: 50px; top: 136px; width: 448px; height: 27px; background-image: url('/images/Split_anAudioTrack.png');"></div></a>
-                       <a href="@@automation"><div class="hoverimg" style="left: 50px; top: 163px; width: 448px; height: 26px; background-image: url('/images/Split_someAutomation.png');"></div></a>
-                       <a href="@@audio-track-controls"><div class="hoverimg" style="left: 50px; top: 189px; width: 448px; height: 27px; background-image: url('/images/Split_anotherAudioTrack.png');"></div></a>
-                       <a href="@@midi-track-controls"><div class="hoverimg" style="left: 50px; top: 215px; width: 448px; height: 26px; background-image: url('/images/Split_aMIDITrack.png');"></div></a>
-                       <a href="@@midi-track-controls"><div class="hoverimg" style="left: 50px; top: 242px; width: 448px; height: 54px; background-image: url('/images/Split_anotherMIDITrack.png');"></div></a>
-               </div>
+       <img src="/images/mixer_map.png" alt="The Mixer window" usemap="#mixer_map" width="600" height="325">
+       <map name="mixer_map">
+               <area shape="rect" coords="0,0,336,8" href="@@main-menu" />
+               <area shape="rect" coords="336,0,600,8" href="@@status-bar" />
+               <area shape="rect" coords="0,8,68,28" href="@@transport-bar" />
+               <area shape="rect" coords="68,8,108,28" href="@@selection-and-punch-clocks" />
+               <area shape="rect" coords="108,8,144,28" href="@@other-toolbar-items#monitor-options" />
+               <area shape="rect" coords="144,8,196,28" href="@@other-toolbar-items#latency-compensation-info" />
+               <area shape="rect" coords="196,8,228,28" href="@@other-toolbar-items#playhead_options" />
+               <area shape="rect" coords="228,8,348,28" href="@@transport-clocks" />
+               <area shape="rect" coords="348,8,368,28" href="@@other-toolbar-items#status_indicators" />
+               <area shape="rect" coords="368,8,384,28" href="@@other-toolbar-items#monitor_section_info" />
+               <area shape="rect" coords="384,8,428,28" href="@@selection-and-punch-clocks" />
+               <area shape="rect" coords="428,8,552,28" href="@@mini-timeline" />
+               <area shape="rect" coords="552,8,600,28" href="@@other-toolbar-items#mode_selector" />
+               <area shape="rect" coords="0,28,121,154" href="@@favorite-plugins-window" />
+               <area shape="rect" coords="0,154,121,237" href="@@strips-list" />
+               <area shape="rect" coords="0,237,121,324" href="@@groups-list" />
+               <area shape="rect" coords="121,28,432,33" href="@@track-and-bus-groups" />
+               <area shape="rect" coords="514,28,548,324" href="@@master-bus-strip" />
+               <area shape="rect" coords="548,28,599,324" href="@@monitor-section" />
+               <area shape="rect" coords="432,28,474,324" href="@@control-masters-mixer-strips" />
+               <area shape="rect" coords="263,33,333,324" href="@@audiomidi-busses-mixer-strips" />
+               <area shape="rect" coords="121,33,263,324" href="@@audiomidi-mixer-strips" />
+               <area shape="rect" coords="474,28,514,324" href="foldback-strip" />
+               <area shape="rect" coords="333,33,343,324" href="adding-tracks-busses-and-vcas" />
+       </map>
 
-  <div class="container" style="float:left; width: 600px; height: 347px; background-image: url('/images/Split_Background.png');">
-                       <a href="@@main-menu"><div class="hoverimg" style="left: 0px; top: 11px; width: 297px; height: 13px; background-image: url('/images/Split_MainMenu.png');"></div></a>
-                       <a href="@@status-bar"><div class="hoverimg" style="left: 297px; top: 11px; width: 303px; height: 13px; background-image: url('/images/Split_StatusBar.png');"></div></a>
-                       <a href="@@transport-bar"><div class="hoverimg" style="left: 0px; top: 24px; width: 86px; height: 24px; background-image: url('/images/Split_Transport.png');"></div></a>
-                       <a href="@@selection-and-punch-clocks"><div class="hoverimg" style="left: 86px; top: 24px; width: 50px; height: 24px; background-image: url('/images/Split_RecordandPunchOptions.png');"></div></a>
-                       <a href="@@other-toolbar-items#monitor-options"><div class="hoverimg" style="left: 136px; top: 24px; width: 46px; height: 24px; background-image: url('/images/Split_MonitorOptions.png');"></div></a>
-                       <a href="@@other-toolbar-items#playhead_options"><div class="hoverimg" style="left: 182px; top: 24px; width: 43px; height: 24px; background-image: url('/images/Split_PlayheadOptions.png');"></div></a>
-                       <a href="@@transport-clocks"><div class="hoverimg" style="left: 225px; top: 24px; width: 154px; height: 24px; background-image: url('/images/Split_Clocks.png');"></div></a>
-                       <a href="@@other-toolbar-items#status_indicators"><div class="hoverimg" style="left: 379px; top: 24px; width: 23px; height: 24px; background-image: url('/images/Split_StatusIndicators.png');"></div></a>
-                       <a href="@@selection-and-punch-clocks"><div class="hoverimg" style="left: 402px; top: 24px; width: 55px; height: 24px; background-image: url('/images/Split_SelectionClock.png');"></div></a>
-                       <a href="@@mini-timeline"><div class="hoverimg" style="left: 457px; top: 24px; width: 90px; height: 24px; background-image: url('/images/Split_NavigationTimeline.png');"></div></a>
-                       <a href="@@other-toolbar-items#mode_selector"><div class="hoverimg" style="left: 547px; top: 24px; width: 53px; height: 24px; background-image: url('/images/Split_LevelModeScripts.png');"></div></a>
-                       <a href="@@favorite-plugins-window"><div class="hoverimg" style="left: 0px; top: 48px; width: 66px; height: 122px; background-image: url('/images/Split_FavoritePlugins.png');"></div></a>
-                       <a href="@@strips-list"><div class="hoverimg" style="left: 0px; top: 170px; width: 66px; height: 88px; background-image: url('/images/Split_StripsList.png');"></div></a>
-                       <a href="@@groups-list"><div class="hoverimg" style="left: 0px; top: 257px; width: 66px; height: 90px; background-image: url('/images/Split_GroupsList.png');"></div></a>
-                       <a href="@@track-and-bus-groups"><div class="hoverimg" style="left: 66px; top: 48px; width: 363px; height: 9px; background-image: url('/images/Split_GroupsTabs.png');"></div></a>
-                       <a href="@@master-bus-strip"><div class="hoverimg" style="left: 490px; top: 48px; width: 46px; height: 299px; background-image: url('/images/Split_MasterStrip.png');"></div></a>
-                       <a href="@@monitor-section"><div class="hoverimg" style="left: 536px; top: 48px; width: 64px; height: 299px; background-image: url('/images/Split_MonitorSection.png');"></div></a>
-                       <a href="@@control-masters-mixer-strips"><div class="hoverimg" style="left: 429px; top: 48px; width: 61px; height: 299px; background-image: url('/images/Split_ControlMastersStrips.png');"></div></a>
-                       <a href="@@audiomidi-busses-mixer-strips"><div class="hoverimg" style="left: 373px; top: 57px; width: 43px; height: 290px; background-image: url('/images/Split_aBusStrip.png');"></div></a>
-                       <a href="@@audiomidi-mixer-strips"><div class="hoverimg" style="left: 66px; top: 57px; width: 45px; height: 290px; background-image: url('/images/Split_anAudioStrip.png');"></div></a>
-                       <a href="@@audiomidi-mixer-strips"><div class="hoverimg" style="left: 155px; top: 57px; width: 43px; height: 290px; background-image: url('/images/Split_aMIDIStrip.png');"></div></a>
-               </div>
-
-  <!--<figcaption>
-               <ol class="multicol3">
-                       <li>Main menu</li>
-                       <li>Status bar</li>
-    </ol><ol class="multicol3" start="3">
-                       <li>Transport bar and Times</li>
-                       <li>Mode switch</li>
-    </ol><ol class="multicol3" start="5">
-                       <li>The <dfn>Mixer</dfn> window</li>
-                       <li>The <dfn>Editor</dfn> window</li>
-               </ol>
-       </figcaption>-->
   <figcaption>
                The Editor and Mixer windows. Click on a section to access its description.
        </figcaption>