CSS sprite を使用するとサイトの表示が高速になります。
手法としては、複数の画像を1枚に画像にくっつけて保存(mysprite.png)し、表示するときに
position: absolute; top: -210px; /* 上下にずらす */ top: 0px; /* 左右にずらす */
でずらすというもの。
<a class="menu_test" href="#"><img src="/css/mysprite.png"</a>
a.menu_test { display: block; overflow: hidden; position: relative; width : 50px; height : 20px; } .menu_test img{ position: absolute; top: -210px; } /* ロールオーバー */ .menu_test img:hover{ position: absolute; top: -230px; }
これだけ。簡単です。
http://ja.spritegen.website-performance.org/
http://web.r-studio.jp/fieworks/articles/introduce_csssprite_extension.html