« ♪コントラバスHANNON(半音)練習 | トップページ | HTML要素の位置とサイズ »

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"は このブログのタイトルバーで利用している画像です。

横2ピクセル高さ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...>が必要だった。

|

« ♪コントラバスHANNON(半音)練習 | トップページ | HTML要素の位置とサイズ »

トラックバック


この記事へのトラックバック一覧です: HTMLでロールオーバーボタン:

« ♪コントラバスHANNON(半音)練習 | トップページ | HTML要素の位置とサイズ »