マウスのロールオーバーTIPS

前回書いたロールオーバーとは違う方法でうまく実現できました。
今回のポイントは
・ロールオーバー前と後の2つの画像を1つで用意
・HTMLにテキストを書いているが表示されず、画像のみ表示
です。

では早速解説へ。
まず画像を用意します。今回は以下。





大きさは横160、縦80です。
注意するのは、この画像が一枚の画像ということです。
実際に表示するボタンは縦40になります。

では上記画像を使ったロールオーバーを結果から。

こんな感じ

どうでしょう。
HTMLのソースは以下の通りです。（注意　タグは全角）
＜div class="navi"＞＜a href="#"＞こんな感じ＜/a＞＜/div＞

CSSのソースは以下の通りです。
.navi a{
display:block;
width:160px;
height:40px;
text-indent:-500px;
background-image:url(画像のURL);
overflow:hidden;
}
.navi a:hover {
background-position:0px -40px;
}


HTML本文のリンクテキスト「こんな感じ」は表示されず画像の上半分を表示しています。
ロールオーバーさせると40ピクセル移動させて下の画像を表示するという方法です。

今回はこのあたりで(^^)

■DREAMWEAVER 8による至極のCSSレイアウトデザイン！パーフェクトブック