イヌでもわかるJavaScript講座

【リスト】

<head>
<style type="text/css"><!--
A.myBtn:link    { color:#0000ff;
                  border-style:solid;
                  background-color:#ffffff;
                  text-decoration:none;
                  font-size:medium; }
A.myBtn:visited { color:#0000ff;
                  border-style:solid;
                  background-color:#ffffff;
                  text-decoration:none;
                  font-size:medium; }
A.myBtn:active  { color:#0000ff;
                  border-style:solid;
                  background-color:#ffffff;
                  text-decoration:none;
                  font-size:medium; }
A.myBtn:hover   { color:#ffffff;
                  border-style:solid;
                  background-color:#0000ff;
                  text-decoration:none;
                  font-size:medium; }
.myComment      { color:#0000ff;
                  border-style:dashed;
                  background-color:#ffffff;
                  border-color:#0000ff;
                  height:auto;
                  font-size:medium;}
--></style>
</head>
<script language="JavaScript"><!--
function myIn(myMes) {                // カーソルが乗った
  document.myForm.myGuide.value=myMes // 説明を出す
}
function myOut() {                    // カーソルが離れた
  document.myForm.myGuide.value=''    // 説明を消す
}
// --></SCRIPT>
<A class="myBtn" href="step1.htm" onmouseout ="myOut();"
   onmouseover="myIn('いきなりJavaScriptを使ってみましょう');">
STEP1
</A>　
<A class="myBtn" href="aisatu.htm" onmouseout ="myOut();"
   onmouseover="myIn('あいさつ文を表示してみましょう');">
STEP2
</A>　
<A class="myBtn" href="getdate.htm" onmouseout ="myOut();"
   onmouseover="myIn('現在の日付と時間を表示してみましょう');">
STEP3
</A>　
<A class="myBtn" href="function.htm" onmouseout ="myOut();"
   onmouseover="myIn('関数化してHTMLソースリストを整理しましょう');">
STEP4
</A>
<BR><BR>
<FORM name="myForm">
<INPUT class="myComment" size="50" name="myGuide" readonly type="text">
</INPUT>
</FORM>

【説明】

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

説明

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

<A>タグにスタイルシート(myBtn)を使って、ボタンのように見栄えを変えています。
詳しくは、Step.41、Step.42を参照してください。
この<A>タグでのスタイルシート設定で注意があります。<A>タグに使えるスタイルシート、使ってはいけないスタイルシートがあります。使ってはいけないスタイルシートを使うと、NN4でイベントが発生しなくなってしまいます。つまり、説明が出なくなるのですが、それだけではありません。リンクもできなくなってしまいます。(^^;

<INPUT>フォームもスタイルシートを使って、入力フォームとは分からないまでに見栄えを変えています(myComment)。<INPUT>フォーム内の readonly は、読込み専用命令で、入力をできなくしています。
しかし、NN4はフォームにスタイルシートが使えないため、<INPUT>タグ丸出しになってしまいます。(^^;

myIn( )、myOut( ) のフォーム内の文字を変更は、Step.5 を参照してください。

Special Thanks : AKEさん

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