HTMLでロールオーバーボタン
cssでbackgroundを指定する。
ボタンの背景部だけをcssで指定することができます。
次の記述となっています。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0.1//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head></head><body> <style type="text/css"> input.bt0 {background-image:url("base_b.gif");color:white;} input.bt0:hover {background-image:url("base_r.gif");} </style> <input class="bt0" type="button" value="Click-me(ABC)xx" onClick="document.getElementById('text2').value='ABC';" style="width:150px;height:29px"> <input class="bt0" type="button" value="Click-me(XYZ)" onClick="document.getElementById('text2').value='XYZ';" style="width:150px;height:29px"> <input type="text" id="text2"/> </body></html>
"base_b.gif"と"base_r.gif"は このブログのタイトルバーで利用している画像です。
横２ピクセル高さ25ピクセルの縦長図形となっています。これが横方向にタイリング され、横長のボタン背景となります。
拡大し、右に示します。
<!DOCTYPE...>を指定しないとhoverが有効とならない場合がありますので 注意してください。
javascriptでイメージを切り替える
ボタン記述の場所にjavascriptを書き下ろす単純なものです。余程の事でない限り 確実に動きます。 前項のcssの場合、ブラウザや設定によっては動かない可能性があります
HTML記述は次のようになっています。
<input type="image" style="WIDTH:150px;position:relative;top:-5px;left:0px"
onMouseDown="document.getElementById('text1').value='abc';"
src="button_abc_0.gif"
onMouseOut="this.src='button_abc_0.gif'"
onMouseOver="this.src='button_abc_1.gif'"
align=middle >
<input type="image" style="WIDTH:150px;position:relative;top:-5px;left:0px"
onMouseDown="document.getElementById('text1').value='xyz';"
src="button_xyz_0.gif"
onMouseOut="this.src='button_xyz_0.gif'"
onMouseOver="this.src='button_xyz_1.gif'"
align=middle >
<input type="text" id="text1"/>
マウスon状態とout状態の画像を作成しておき、それをimageボタン( <input type="image">)のsrcにセットします。
onMouseOutイベントとonMouseOverイベントでimageボタンのsrcを書き換えています。
＃＃＃
2012/2/19:
cssによる版を前にもってきた。
普段から使っている手法なのだが、ブログ用の記事htmlでは動かず、そのまま
にしてあった。<!DOCTYPE...>が必要だった。
| 固定リンク