リストメニューの画像置換

css
  • 再読み込みなし
  • プリロードいらず。
  • メニューの大きさが100 x 20としてみる。


html:

<html>
<body>
  <div id="menu">
    <ul>
      <li><a href="#" id="hoge">hoge</li>
      <li><a href="#" id="moge">moge</li>
    </ul>
  </div>
</body>
</html>


css:

#menu ul {
  margin: 0;
  padding: 0;
  overflow:hidden;
  list-style-type: none;
}
#menu ul li {
  margin: 0;
  padding: 0;
  list-style-type: none;
    /* ＼*/
    overflow:hidden;
    /* */
}
#menu ul li a {
  display: block;
  width:100px;
  height:20px;
  padding:20px 0 0 0;
  overflow:hidden;
  /* */
  height:0px !important;
  height /**/:20px; /* win ie5 */
  }
#menu a:hover {
  background-position: 0 -20px;
}

a#hoge {
  background: transparent url( /path/to/hoge.gif) 0 0 no-repeat;
}
a#moge {
  background: transparent url( /path/to/moge.gif) 0 0 no-repeat;
}