ボタンやバナーのロールオーバーについて(メモ)

今現在の私が一番ラクチンだと思っているやり方のメモ。
画像を二枚用意してHTML上ではマウスOFFの画像
CSSで背景画像にマウスONの画像を指定し、
オンするとオフ画像が消えるようになっている。
これに当てはめれば他にも使えるはず。
(htmlいれるとテキスト消えるので、<>の代わりに<>を使用。)
【HTML】
<p class=”button”><a href=”http://nac_mart.com” target=”_blank”><img src=”img/button_off.gif” alt=”ナックマートへ” width=”300″ height=”75″ /></a></p>
【CSS】
.button {
width: 300px;
height: 75px;
background-image: url(../img/button_on.gif);
background-repeat: no-repeat;
}
.button a { display: block; }(←ブロックにもwidthとheight入れないと変になる場合あり)
.button a:hover{ background: none; }
.button a:hover img { visibility: hidden; }

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です