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