2011-06-09~またもや画像置換で手こずるw~

自分のホームページにtwitterとfacebookのボタンを設置しようと思ったら
画像置換がまた、忘れてしまっていたw

今回、そのtwitterとfacebookのアイコンを組み込む上でのメモ。
（自分なりのメモなので、他の人が見たら分からない場合があります。ご了承を）

まずはそのアイコンをそれぞれ、ホバーする時の画像として２種類ずつ用意。

htmlのほうはこんな感じ。

• twitter
• facebook

で、問題はCSS。
まずは２つの画像を重なり合うように置く。

ul .btn_tw {
background: url(../image/index/twitter_icon_hover.png) no-repeat;
}
ul .btn_tw a {
background: url(../image/index/twitter_icon.png) no-repeat;
}
ul .btn_fa {
background: url(../image/index/facebook_icon_hover.png) no-repeat;
}
ul .btn_fa a{
background: url(../image/index/facebook_icon.png) no-repeat;
}

これはアンカーポイントにまで画像を指定するというやり方。

#sidecontents #side_btn ul li {
list-style-type: none;
float:left;
width:64px;
height: 64px;
}

liには必ず、幅と高さを指定する。さらに

#sidecontents #side_btn ul li a {
height: 100%;
display: block;
overflow: hidden;
text-indent:-9999px;
text-decoration:none;　←あってもなくても良い。
}
高さは100％指定の必ずブロック要素にしておく！
（インラインのままでは、次にくるoverflow: hidden;が効かない）
もちろんtext-indentも指定。こうすれば、弾いた文字は消える。

最後に大事なのがこれ

#sidecontents #side_btn ul li a:hover {
/* 　background:none !important;*/
background-image:none !important;

}
アイコンをホバーした時に強制的に、画像を透明化させ
下の画像を写すという訳だ。

以上、メモ。