入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS&JavaScriptサンプル
2007年03月26日-
スポンサード リンク
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の知識のない方でも、ちょこっと変えれば簡単に独自フォームが作れそうですね。
なぜか、デモがうまく動作しないのですが、こちらのページでダウンロードしたものは正常に動くようです。
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」
- スムーズに横スクロールするレイアウトサンプル
- 斬新なページメニューが作れる「Inline Menu Layout with Gallery Panel」
- 世界中で今何時を計算できる「Spacetime」
- シンプルなタブUIを実現できる「Skeletabs」
- テキストを省略してブロックを小さくできる「Cuttr.js」
- インタラクティブに動く立体的なテキストを生成「ztext.js」
- WebGLを使った動画の切り替えアニメーション実装
- スクロールにあわせて動くイメージタイル実装
- 1000以上の汎用アイコンセット「emblemicons」
- 過去のエントリ