クリックできる場所でマウスカーソルを変化させる

2006/6/7 01:47

Google Calendarでは、カレンダー部分をクリックすると吹き出し形のレイヤーが表示されて、スケジュールを入力できるようになっています。しかし、カレンダー上にマウスカーソルを置いてもカーソルのスタイルが変化しないため、最初に使うときに「カレンダー上をクリックできる」ということが分からないかもしれません。

ある部分にマウスカーソルが乗ったときにマウスカーソルのスタイルを変化させるには、JavaScriptを使って次のようにします。

・tableのtdタグに適用する場合
<td onMouseOver=”this.style.cursor=’pointer'”>…</td>

スタイルは色々ありますが、ここで指定しているpointerはリンクにカーソルを合わせたとき用のスタイルです。

サンプル

ここにマウスカーソルをあわせてください
マウスのスタイルが変化します
クリックするとダイアログが開きます。

同じタグにonClickでクリックしたときに実行する関数を指定しておけば、リンク要素のない部分であたかもリンクをクリックしたかのようなインタフェースを実現できます。