Replaced divs by imagemap in Ardours Interface Overview for maintainability and PDF generation
Ed Ward
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -219,6 +219,3 @@ code {
|
|||
.mac .mod23n:before { content: "Ctrl Shift";}
|
||||
.mac .mod123n:before {content: "Cmd Ctrl Shift";}
|
||||
|
||||
/* for images sliced in divs, as in http://manual.ardour.org/ardours-interface/about/ */
|
||||
.container { position: relative; border: none; }
|
||||
.hoverimg { position: absolute; border: none; }
|
||||
|
|
|
|||
|
|
@ -241,5 +241,3 @@ kbd.cmd {
|
|||
#content p.section { padding-left: 6em; }
|
||||
#content p.subsection { padding-left: 8em; }
|
||||
|
||||
/* for images sliced in divs, as in http://manual.ardour.org/ardours-interface/about/ */
|
||||
.hoverimg:hover{ z-index:100; box-shadow: 0 0 .2em .2em lightgreen; }
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 546 B |
|
Before Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 836 B |
|
Before Width: | Height: | Size: 746 B |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 1012 B |
|
Before Width: | Height: | Size: 6.0 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 674 B |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 49 KiB |