« JAVAのハッシュテーブル HashMap | トップページ | VB6アプリでマウスホイールを使う。 »

2008年12月20日 (土)

トップページにTooltip (jQueryを使ったオリジナル)

トップページにTooltip機能を付けた。Tooltipのスクリプトはいろいろと流通しているが、この数年の間に大きく様変わりしたJavascriptを久しぶりに使ってみようというわけで自分でTooltipを作成した。

[1] 2種類のTooltip、(1) フォーカスが当たったときだけ表示されフォーカスが外れたら消えるもの (2) 閉じるボタン付きで、フォーカスが当たったら表示されるが、消すのは閉じるボタンによるもの

[2] Tooltipに表示する内容は本体ページの中に記述できるようにする。しかもTooltipターゲットの近くに記述する。

[3] JavascriptのライブラリとしてjQuery1.2.6を使う。jQueryの日本語資料としてこちらを参照した。

[4] jQueryによるTooltip Coda Bubble のソースを参考も参考にした。

jsソースcssファイルはこちら。

Hytip_sample_1_2Hytip_sample_2 

[注]

(1) プログラミングインターフェースはprototypeによるTooltip protip2 に似ています。

(2) 動作確認は今のところIE7だけ

[機能拡張案]

(1) マウスカーソルがターゲットを横切っただけでTooltipが表示されてしまうのはうっとうしいので、一定時間ターゲット内にマウスカーソルが留まったときに表示する。

(2) IMGタグと組み合わせて画像の拡大表示。

« JAVAのハッシュテーブル HashMap | トップページ | VB6アプリでマウスホイールを使う。 »

パソコン・インターネット」カテゴリの記事

コメント

追加機能案(1)(2)ともに実装した。

ただ、画像の横幅が大きいとき閉じるボタンの位置が変になる。これは今後の課題。

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: トップページにTooltip (jQueryを使ったオリジナル):

« JAVAのハッシュテーブル HashMap | トップページ | VB6アプリでマウスホイールを使う。 »