📄 images-in-bar.html

📁 用于一医院的电子病历系统. JAVA开发。很有参考价值。
💻 HTML
字号:
<html xmlns="http://www.w3.org/1999/xhtml">  <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>DynarchMenu: menu actions</title>    <style type="text/css"> @import url("../src/skin-xp.css"); body { background-color: #ccc; }</style>    <script type="text/javascript">//<![CDATA[      _dynarch_menu_url = "../src/";    //]]></script>    <script type="text/javascript" src="../src/hmenu.js"></script>    <style type="text/css">      /* remove any paddings from the top menu bar.         Also, note that the main menu bar is embedded in a div with         style="float: left" in order to make the menu have the         minimum width (otherwise it'll take all the available         horizontal space).      */      div.dynarch-horiz-menu { padding: 0; }      div.dynarch-horiz-menu table { padding: 0; border-collapse: collapse; }      div.dynarch-horiz-menu table tr td.item table td.icon,      div.dynarch-horiz-menu table tr td.item,      div.dynarch-horiz-menu table tr td.hover,      div.dynarch-horiz-menu table tr td.active,      div.dynarch-horiz-menu table tr td.pressed { padding: 0; border: none; }      /* uncomment the following line if you wish to remove the border too */      /* div.dynarch-horiz-menu { border: none; } */      /* Configure your images.         Note that the real "src" of the img tags is a 1x1 blank.gif image.         We need this trick in order to be able to do "hover" and "active" effects.         "td.hover" means the state of the item when the mouse cursor is over it         "td.active" means the state of the item when it's popup is active, even if the mouse left it.         Note that it is necessary to specify image width and height (otherwise you get an 1x1 item ;-)      */      /* first item, img with class="menubar-company" */      img.menubar-company {        background-image: url("company.png");        width: 76px;        height: 27px;      }      td.hover img.menubar-company { background-image: url("company-hover.png"); }      td.active img.menubar-company { background-image: url("company-hover.png"); }      /* second item, img with class="menubar-products" */      img.menubar-products {        background-image: url("products.png");        width: 80px;        height: 27px;      }      td.hover img.menubar-products { background-image: url("products-hover.png"); }      td.active img.menubar-products { background-image: url("products-hover.png"); }      /* third item, img with class="menubar-partners" */      img.menubar-partners {        background-image: url("partners.png");        width: 81px;        height: 27px;      }      td.hover img.menubar-partners { background-image: url("partners-hover.png"); }      td.active img.menubar-partners { background-image: url("partners-hover.png"); }      /* of course, you can put all of the above in a separate .css         file and thus reduce page load time and required bandwidth. */    </style>  </head>  <body onload="DynarchMenu.setup('menu', { electric: 350 });">    <!-- preload the images to avoid initial flicker -->    <div style="display: none">      <img src="company-hover.png" alt="" />      <img src="products-hover.png" alt="" />      <img src="partners-hover.png" alt="" />      <!-- not necessary to preload the others are they will be displayed initially anyway -->    </div>    <div style="float: left">      <ul id="menu">        <li>          <!-- note we can still include key bindings ;-) -->          <a accesskey="c"><img src="../src/img/blank.gif" alt="Company" class="menubar-company" /></a>          <ul>            <li>Home</li>            <li>About</li>            <li>History</li>          </ul>        </li>        <li>          <img src="../src/img/blank.gif" alt="Products" class="menubar-products" />          <ul>            <li><a href="http://www.dynarch.com/products/dhtml-menu/">DHTML Menu</a></li>            <li><a href="http://www.dynarch.com/products/dhtml-tabs/">DHTML Tabs</a></li>            <li><a href="http://www.dynarch.com/products/navbar/">Navigation bar</a></li>          </ul>        </li>        <li>          <img src="../src/img/blank.gif" alt="Partners" class="menubar-partners" />          <ul class="open-left">            <li>Doe Enterprises</li>            <li>Blah</li>            <li>Etc.</li>          </ul>        </li>      </ul>    </div>    <h1 style="clear: both; padding-top: 1em;">Including images in the main menu bar</h1>    <p>      The above menu uses images instead of text labels for the items      in the main menu bar.  This allows for nicer look, at the price      of some bandwidth.  Note that accessibility is still not a      problem (try this page with Lynx or other text-mode browser, or      with a graphic browser with JS disabled).  That's because we      included "alt" tags for images.    </p>    <p>      This setup is quite simple and it requires you to write some      small CSS rules that specify images for the normal item, for      hover-ed items and for active items, and to remove the padding      and spacing from the main menu bar items.    </p>    <h2>Note on IE</h2>    <p>      For reasons beyond understanding, Internet Explorer 6 fails by      one pixel <em>if</em> the image height is an even number.  For      instance, our images are exactly 26 pixels high, but if we pass      height: 26px IE will leave a 1px top margin (!!).  This browser      has a mind of its own.  Resolution was to pass 27px.  In      conclusion, try to create images with an odd height. :-)    </p>    <h2>How?</h2>    <p>      Please see the source of this page to see how it's done.  The      code is heavily commented for your reference.    </p>    <hr />    <p style="text-align: right">      <small>        Err, don't kill me for those images, I'm not an artist. ;-)      </small>    </p>  </body></html><!---->
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -