Introduction

ブログ内検索

  • このサイトの記事を検索 by Google

おすすめの一冊!

無料ブログはココログ

« ついったー用語 | トップページ | 栗本薫『仮面舞踏会』 »

2009-09-02

ボタンはボタンらしく

今日も無意味に JavaScript をいじってしまいましたw


とある便利なサイトを勝手に改造する SeaHorse スクリプト (SleipnirScript)
を作っているのですが、その中でページ上に勝手にボタンを追加しています。

そのボタンなのですが、フォームの input/button 要素ではなくて
HTML の span 要素に onclick イベントを設定して、擬似的にボタンに
みせかけています(フォームのボタンだと大きすぎて収まらないため)。

なので、デフォルトのままだと、

 ・マウスカーソルが上に来ても何も反応しない
 ・マウスカーソルが上に来てもカーソルの形が「I」のまま

という感じで、言われないとボタンに見えなかったりします・・・


今日の改造は、

 ・マウスオーバーで色を変える
 ・マウスオーバー時のマウスカーソルを「指」に変える

というものです。

単に onmouseover イベントを捕まえて変化させ、
onmouseout イベントを捕まえて元に戻すだけ。

マウスカーソルの変更は、

_document.body.style.cursor = 'hand';
で「指」の形にして、
_document.body.style.cursor = '';
で元に戻す、という感じでカンタン。 やっぱり「ボタンはボタンらしく」という UI のキホンは大事ですよねー # ドキュメントを書かない場合は特に・・・

« ついったー用語 | トップページ | 栗本薫『仮面舞踏会』 »