前の記事 ≪:Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」
次の記事 ≫:C、java、JavaScript、html等の言語をハイライト表示するJavaScriptライブラリ...

入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS&JavaScriptサンプル

2007年03月26日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Form field hints with CSS and JavaScript (Ask the CSS Guy)
My co-workers pointed out a nice effect on the Vox registration form.

入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS&JavaScriptサンプル。
次のように、入力フォームにカーソルを合わせた時点でそのフィールドのヒントを表示できます。



フォームの入力フィールドの下に説明を書くよりも、ポップアップしてヒント表示したほうがユーザビリティ的によさそうですね。
要素の表示/非表示処理をJavaScriptによって行っていて、綺麗なHTMLによる実装が可能な点もいいです。

また、サンプルが1ファイル+画像1枚とシンプルなので、あまりJavaScriptやCSSの知識のない方でも、ちょこっと変えれば簡単に独自フォームが作れそうですね。

なぜか、デモがうまく動作しないのですが、こちらのページでダウンロードしたものは正常に動くようです。

関連の記事検索:CSS, フォーム, Ajax
スポンサード リンク

By.KJ : 2007年03月26日 10:01 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)