acky info

連絡先

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

ads

フォームの送信ボタンにロールオーバーをつける

2011/7/14 コードの最適化、半透明(50%サンプル)追加

フォームのボタンに画像を設定する時に使うtype="image"ですが、このままではロールオーバーをつけることができません。そのためJavaScriptのonmouseover="this .src='画像パス'" onmouseout="this .src='画像パス'"やyuga.jsなどのjsライブラリを使うことになります。
しかしCSSを工夫することによりロールオーバーが可能になります。この方法ではinputを囲むブロック要素が必要になってしまいますが、大抵の場合はinputをブロック要素で囲んでいるので特に問題にはならないでしょう。

まずinputをブロック要素で囲みます。そこに背景画像を入れ、inputの真下に来るように調整します。
次にinputが:hoverの時にalphaでinputが消えるように透明度を調整します。また、a以外の:hoverにIE6は対応していないのでliにcsshover3を読み込むように指定します。
alphaは「疑似クラス:hoverを使ったロールオーバー」に、csshover3は「CSSで作るプルダウンメニュー」に詳しく載っています。

ul li{
background:url(button_bg.png) no-repeat left top;
}

input{
behavior: url("/csshover3.htc");
}

input :hover{
filter: alpha(opacity=0);
-ms-filter: alpha(opacity=0);
opacity: 0.0;
}

<ul>
<li><input type="image" src="button.png" /></li>
</ul>

また、完全に色が変わるのではなく色を薄めて光ったような効果を出す場合は背景画像が不要になるのでより簡単にできます。

input{
behavior: url("/csshover3.htc");
}

input :hover{
filter: alpha(opacity=50);
-ms-filter: alpha(opacity=50);
opacity: 0.5;
}

ads

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

お薦めの参考書

CSS、webデザイン学習書籍、参考書をアマゾンで購入する

Copyright (C) acky. All Rights Reserved.