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