実行例

サンプルだけの HTMLはこちらへ

説明

AKEさんが、リンク説明窓の面白いテクニック方法のサンプルを送ってきてくれました。
内容は至ってシンプルで、テキストフォームに説明を出力する方法です。
シンプルなやり方ですが、スタイルシートをふんだんに入れ込んで、見た目もとてもきれいに仕上がっています。
この方法を使えば、ブラウザやバージョンの違いで表示位置がずれることもありません。

<A>タグにて、イベント処理を行います。
マウスが乗ったときは、myIn() を呼び、テキストフォームに説明を表示します。説明文は、パラメータにて受け渡します。
マウスが離れたときは、myOut() を呼んで、テキストフォーム内をクリアします。

<A>タグにスタイルシートを使って、ボタンのように見栄えを変えています。(myBtn)
詳しくは、Step.41、Step.42を参照してください。
※ 古臭いブラウザ NN4 で、特定のプロパティを使うとイベントが発生しなくなります。リンクもできなくなります。

<INPUT>フォームもスタイルシートを使って、入力フォームとは分からないまでに見栄えを変えています。(myComment)
<INPUT>フォーム内の readonly は、読込み専用命令で、入力をできなくしています。
※ 古臭いブラウザ NN4 はフォームにスタイルシートが使えません。

Special Thanks : AKEさん

参考ステップ
Step.5 フォームを使って日付と時間をリアルタイムに表示してみましょう　
Step.41 リンク文字の上にマウスがきたら、色を変えてみましょう　
Step.42 リンク文字の上にマウスがきたら、背景色をかえてみましょう　

▲TOP

実行例

リスト

説明