Class Library > VividButton

VividButton

目次

はじめに

VividButton クラスは画像を用いたグラフィカルなボタンを簡単に生成します。
マウスを合わせた時に画像を入れ換えることって、よくありませんか？
このクラスはそれを簡単に行おうというクラスです。
クリック時のアクションも自分で設定することが可能です。

JavaScript に詳しくない方は 使用例 と コンストラクタ の項目のみを読んで下さい。使用方法は至って簡単ですので、逆に混乱する恐れがあります。

それ以外の方は、応用的に使用することが可能なため、全部読むことをお勧めします。

使用例

// クリック時のイベントハンドラを設定しない場合 → 実際の例

var vbutton0 = new VividButton( "virgo0.gif" , "virgo1.gif" , 221 , 24 );

――――――――――――――――――――――――――――――――――――――――

// クリック時のイベントハンドラを handler に設定 → 実際の例

// index.html へ移動する関数
function handler(){ location.href = "index.html" ; }

var vbutton1 = new VividButton( "virgo0.gif" , "virgo1.gif" , 221 , 24 , handler );

インスタンス変数

Image[] images ;    // MouseOut 時と MouseOver 時の画像を格納している配列（長さ2）
function listener ; // Click 時のイベントハンドラ
number index ;      // document.images 配列のこのイメージオブジェクトへの参照番号
考えなくて結構です（笑）

コンストラクタ

VividButton( string path0 , string path1 , number width , number height );
VividButton( string path0 , string path1 , number width , number height , function listener );
VividButton クラスは MouseOut 時の画像と MouseOver 時の画像が必要になります。
つまり、path0 で MouseOut 時の画像URL、path1 で MouseOver 時の画像のURLを指定します。
width , height は画像のサイズです。

listener は省略可ですが、Click 時のアクションを必要とする場合必要となります。 その場合、処理を行う関数名のみを入力して下さい。

コンストラクタでは document.write で書き出しているため、インスタンスはページが読み込まれる前に生成する必要があります。
ページが読み込まれたあと（onload イベント発生後）などにインスタンスを生成することは出来ません。

インスタンスメソッド

MouseOver時の画像入れ換え : over
void over();
このメソッドを呼び出すことにより、画像が MouseOver 時の画像へ入れ替わります。
しかし、このメソッドは既に MouseOver 時のイベントハンドラに設定されているため、普通に使う分には全く意識しなくても良いです。
強制的に画像を変更したい場合に使用します。 
var vbutton = new VividButton( "out.gif" , "over.gif" , 200 , 40 );

vbutton.over() ; // over.gif に画像が入れ替わります。
MouseOut時の画像入れ換え : out
void out();
このメソッドを呼び出すことにより、画像が MouseOut 時の画像へ入れ替わります。
しかし、これも同じく既に MouseOut 時のイベントハンドラに設定されているため、普通に使う分には意識しなくても良いです。
強制的に画像を変更したい場合に使用します。 
var vbutton = new VividButton( "out.gif" , "over.gif" , 200 , 40 );

vbutton.out() ; // out.gif に画像が入れ替わります。
イベントハンドラの実行 : click
void click();
コンストラクタで listeter が設定されていたとき、listener を実行します。
これもまた、クリック時のイベントハンドラに自動で設定されるため、意識する必要はありません。
強制的にイベントハンドラを呼び出したいときに使用します。 
function handler(){ alert( "!CLICK!" ); }

var vbutton = new VividButton( "out.gif" , "over.gif" , 200 , 40 , handler );

vbutton.click() ; // アラートに !CLICK! と表示されます。
標準出力文字列 : toString
string toString();
VividButton クラスの標準出力文字列を返します。
返される文字列は "VividButton : "+[mouseout時画像の名前]+" , "+[mouseover時画像の名前]+" @ "+this.index です。 
var vbutton = new VividButton( "out.gif" , "over.gif" , 200 , 40 );

status = vbutton ; // 結果は VividButton : out.gif , over.gif @ 3 など

メソッド一覧

Dimension クラスで使用できるメソッドのリストです。
型メソッド名説明
voidoutmouseout イベントハンドラ、画像の入れ換え
voidovermouseover イベントハンドラ、画像の入れ換え
voidclickclick イベントハンドラの実行
stringtoString標準出力文字列

補足

■　Click 時イベントハンドラ
コンストラクタでイベントハンドラを設定しますが、呼び出されるのは画像をクリックしたときです。
このハンドラには引数が指定できないように思いますが、実は引数が一つ存在する関数としています。
例えばイベントハンドラを以下のように定義します。 
function handler(){ alert( arguments[0] ); }
では、実際の例 を見てください。
このアラートに表示される 0 は何を表しているのかというと、インスタンス変数の index を表しています。
つまり、引数が一つでそれは index という関数に変換されているわけです。 index は document.images 配列のこのイメージが格納されている参照番号ですので、これを利用すると関数（イベントハンドラ）を共有させたり色々なことが出来るようになります。では、最後にもう一つその例を。
■　out , over メソッドの強制呼び出し
メソッドのところで説明した通り、これらのメソッドは普通に使用する分には全く意識しなくても良いです。しかし、メソッドを強制的に呼び出すことでちょっとした応用が利くようになります。例えば、他のところで発生したアクションで画像を入れ換えたいときです。
後述するようにいくらでも応用効きますので、臨機応変に変更して下さい。
■　拡張しましょう
VividButton クラスのメソッドは out,over,click がありましたが、これらは独自で変更した方が実に使い易いです。いくらでも拡張できますので、応用的に使用することを願います。
また、メソッドの動作だけを変更するのではなく、全体を変更することもありです。ちょっと面白い操作をしているので、ソースをじっくり見てご自分の知識にして頂きたいと思います。クラスメンバを作成するともっと面白いことが出来ると思いますよ。