ロールオーバー時の画像切り替え
画像の切り替えは JavaScript でやっていたけど
CSS でもできることを知り
更には、切り替え用の２枚の画像を１枚の画像にする手法を見つけ
ビックリした。
CSS
タグ毎に様々な手法があるようで
以下に記したのはその中のごく一部。
一般画像（２枚）
#menu_top {
width: 180px;
height: 50px;
background: url(out.png) no-repeat;;
}
#menu_top a {
width: 180px;
height: 50px;
display: block;
}
#menu_top a:hover {
background: url(over.png) no-repeat;;
}
一般画像（１枚）
a#menu_top {
width: 300px;
height: 34px;
display: block;
background: url(menu_top.png) left top no-repeat;
text-indent: -9999px;
}
a:hover#menu_top {
background-position: 0 -34px;
}
参考元サイト：nplll CSSだけでマウスオーバーして画像に色を付ける（RobGoodlatte.comの場合）
input タグ画像（２枚）
マウスオーバー時の画像を背景画像として配置し
マウスオーバー時にはマウスアウト時の画像を透過処理し
背景画像を見えるようにする手法。
div.over {
background:url("over.png") no-repeat left top;
}
input:hover {
opacity: 0.0;
*/
/* IE */
/* filter: alpha(opacity=0); */
/*
}
参考元サイト：WebCreator Note inputボタンのロールオーバーをCSSで指定
button タグ画像（２枚）
button タグでもできるようだ。
参考元サイト：パソコンQ&A 現在最良の画像置換法（IR[Image Replacement]法）
JavaScript
２枚の画像
一般画像でも
ボタン画像でも
簡単♪