2006年02月14日
TextInputにロールオーバーを実装する
テキスト入力フィールドにロールオーバーを実装する
・・・というか実装したいのだけどイカスやり方が思いつかない。
以下現在のプラン。
・透明ボタン、テキストインプット、背景の３つを重ねて用意する。
・透明ボタンにロールオーバーしたら
・背景をロールオーバー画像に変化
・マウスをリスナー登録
・透明ボタンを消す
・マウスリスナでカーソルがテキストインプット矩形外に出たらば
・背景画像を元に戻す
・ボタンを復帰
・テキストインプットがクリックされたらば
・マウスリスナーを消去
・テキストインプットの入力フォーカスが失われたら
・背景画像を元に戻す
・ボタンを復帰
こういう感じかな…激しくメンドくてコンポーネント化すぐらいじゃないと実装する価値があるのかちょっと疑問。
もっと頭のいい方法知ってる人がいたら教えてください。
投稿者 Taka : 2006年02月14日 11:04
book
bookmark
trackbacks
this entry's trackback URL:
http://www.fladdict.net/cgi-bin/mt3/mt-tb.cgi/463
このリストは、次のエントリーを参照しています: TextInputにロールオーバーを実装する:
» Jewish Dating from Jewish Dating
fast jewish dating club [read more]
トラックバック時刻: 2006年03月25日 06:55
comment
マウスリスナー使うから面倒くさいのであって
Selection.setFocus() と TextField.onKillFocus() を
使えば一瞬ですよー
さらに突き詰めて、背景画像そのものをボタン化してしまい
テキストインプットの selectable 切り替えでテキストに
フォーカスとられないようにする、と。
by mune : 2006年02月14日 13:33
なんか激しく勘違いしてた…
テキストフィールド上のオンマウス時カーソル表示を
生かそうと思ったら、面倒くさくならざるを得ないですね。
指アイコンとか矢印アイコンでいいなら、後半のやり方で
できそうだけれど。
by mune : 2006年02月14日 13:57
背景画像に onRollOver で、ロールオーバー画像を出すと同時に
onMouseMove に矩形内判定処理を設定すれば、うまくできそうです。
以下、サンプルコード貼り付け。
txt_input.selectable = false;
m_textback.onRollOver = function(){
this.gotoAndStop("over");
this.onMouseMove = this.onMouseMoveFunc;
txt_input.selectable = true;
}
m_textback.onMouseMoveFunc = function(){
if ( this.hitTest( this._parent._xmouse, this._parent._ymouse, true ) == false ){
delete this.onMouseMove;
this.gotoAndStop("out");
txt_input.selectable = false;
}
}
txt_input.onSetFocus = function(){
delete m_textback.onMouseMove;
}
txt_input.onKillFocus = function(){
m_textback.gotoAndStop("out");
this.selectable = false;
}
by mune : 2006年02月14日 14:24