« 自己主張の強さ | Home | 恵方巻き »

2006年2月 4日

onFocusに対応した画像ボタンのロールオーバ



ブラウザ上で動作するシステム(Webアプリ)の作成がほぼ完了し、

デザイン会社さんが作成してきたデザインを組み込んでいたのですが、

どうも上手く動かない現象がでて困っていました。



◆デザイン要件

・通常はボタンは灰色とする

・ボタンにフォーカスが合わさったときに画像を青にする

・ボタンにマウスが合わさったときに画像をオレンジにする

・ボタンがマウスでクリックされたときに画像を黒くする

・IEのみで動作すればよい



ボタンにフォーカスが合わさったときに画像を青にするというのがくせもので、

フォーカスをボタンに合わせて青にした後に、マウスをボタンに合わせてオレンジにして、

マウスを外したときに画像を青に戻す必要があるのに、灰色に戻ってしまったり

(最後のフォーカスを記憶しておく必要がある)

ボタン2にフォーカスを合わせてボタン1をマウスクリックしたときにボタン2の画像が

おかしくなったり、いろいろデザインに不具合があって、もやもやしたので、いちから

デザインを組み直して調べてみたら、デザイン会社さんで使われているソフト(Dreamweaver)で

出力しているJavaScriptの不具合という結論に落ち着きました。

フォーカスに対応していないJavaScriptなのに無理矢理フォーカスで使用しているのが

一番の原因ではないかと推測するのですが。



◆調査で作成した対応版(サンプルページ

 まだ不具合が残っています。不具合が何かがわかった方はテスターの才能があります。



<SCRIPT TYPE="text/javascript">

<!--

var nowDownId = null;

var lastFocusId = null;



function myOnFocus(obj){

  objId = obj.getAttribute('objid');

  img = obj.getAttribute('objsrc');

  if(nowDownId != objId){

    document.getElementById(objId).src = img + '_f.gif';

    nowDownId = null;

    lastFocusId = objId;

  }

}



function myOnBlur(obj){

  objId = obj.getAttribute('objid');

  img = obj.getAttribute('objsrc');

  document.getElementById(objId).src = img + '.gif';

  lastFocusId = null;

}



function myOnMouseDown(obj){

  objId = obj.getAttribute('objid');

  img = obj.getAttribute('objsrc');

  document.getElementById(objId).src = img + '_c.gif';

  nowDownId = objId;

  lastFocusId = objId;

}



function myOnMouseOut(obj){

  objId = obj.getAttribute('objid');

  img = obj.getAttribute('objsrc');

  if(lastFocusId != objId){

    document.getElementById(objId).src = img + '.gif';

  }

  else{

    document.getElementById(objId).src = img + '_f.gif';

    nowDownId = null;

  }

}



function myOnMouseOver(obj){

  objId = obj.getAttribute('objid');

  img = obj.getAttribute('objsrc');

  document.getElementById(objId).src = img + '_o.gif';

}



// -->

</SCRIPT>


<a href="#" tabindex="2" objid="btn01" objsrc="btn01"

onFocus ="myOnFocus(this)"

onBlur ="myOnBlur(this)"

onMouseDown ="myOnMouseDown(this)"

onMouseUp ="myOnMouseOver(this)"

onMouseOver ="myOnMouseOver(this)"

onMouseOut ="myOnMouseOut(this)"

onKeyPress ="myOnMouseDown(this)"

>

<img src="btn01.gif" alt="death" name="btn01" width="80" height="15" border="0" id="btn01"></a>



汚い組み方になった上にFirefoxだとエラーになって、まだ不具合が残っています_n○



追記:

一晩寝てから見直したらFirefoxでのエラーは修正することができました。

JavaScriptはブラウザで動作が異なるし、デバッグしにくいし

ノミで彫刻を作るような技と匠の世界で大変な言語だなぁと思いました。

Javaが建築士だとしたら、JavaScriptは宮大工、って感じ。

コメント(5)

結構いろんなことができるんよねJavaScriptって
けど、デバッグしにくいねー
Java使いのうちの後輩ちゃんは宣言がないのが納得できんってぼやいてました
その後輩ちゃんのありがちな間違い
for(int i=0; i < 10; i++){
// JavaScript
}
んー、気持ちはわかる!でもエラーなんだよね

テストしてみたよ
クリックした後ってフォーカス当たるのかな
そこがヘンかなーくらいしかわかんなかったよ
あとで正解教えてちょ

確認ありがとうー

画面起動後に、画像Aをクリックした後に画像Aにフォーカスが当たるのは、
実際にフォーカスが画像Aに当たっているので意図した動作です。
その後に続けて画像Bをクリックした後に画像Bにフォーカスが
当たらないのが不具合になります。

ikkanが変と思ったならクリック後はフォーカスが当たらない方が自然な
UIなのかもしれないね。ただ統一した制御ができていないので不具合ですね。
この不具合を直して画面ロード時に画像をキャッシュさせる改善を要望します!

あと、私も変数の宣言やif文の書き方をよく間違えますXD

あー、日本語下手でスマヌ。それが言いたかったの
A→Bクリックした時にBが青くならないってことだよね?
けど「不具合がある」って言うから気付いたけど
オレのテスト能力ではすぐには気付かないと思う

number増刊号、表紙見ただけで即買いしました♪

改善要望が華麗にスルーされているXD
NumberPlus、今回面白そうですね。久しぶりに買ってみます。

キャッシュって厄介だよね
いまの社内システム、キャッシュのせいで外部ファイル更新されなくて
キャッシュクリアしないとjs、cssファイルが置き換わらない…
いちおキャッシュ更新するタグ書いてるんだけどねぇ
プロキシが悪さしてるっぽい

あたしゃ技術者失格なんで改善要望は華麗にスルーしま~す

コメントする