Step.27 - ステータスバーに文字を表示する

リンクの上にマウスカーソルを持って行くと、ステータスバーにメッセージを表示するようにします。

ステータスバーにメッセージを表示できるブラウザは壊滅しました。

理由は
ステータスバーに嘘のURLを表示して、あたかも正規サイトにリンクするかのごとくユーザーを安心させて騙す「フィッシング詐欺」対策ではなかろうか。

以下は、まったく意味がなくなってしまったサンプルの残骸です。。

Step テーマ
● windows.status ステータスバーにメッセージをセットする。

実行例

Step.1 いきなりJavaScriptを使ってみましょう
Step.2 あいさつ文を表示してみましょう
Step.3 現在の日付と時間を表示してみましょう
Step.4 関数化してHTMLソースリストを整理しましょう

function myIn( myTblNo ) {                     // カーソルが乗った
 window.status = myStatusTbl[myTblNo];         // ステータスバーに表示
 return true;                                  // 戻り値を true とする
}

function myOut() {                             // カーソルが離れた
 window.status = "";                           // ステータスバーから消去
 return true;                                  // 戻り値を true とする
}
// --></script>

<a href="step1.htm"    onmouseover="return myIn(0)" onmouseout="return myOut()">Step.1 いきなりJavaScriptを使ってみましょう<br></a>
<a href="aisatu.htm"   onmouseover="return myIn(1)" onmouseout="return myOut()">Step.2 あいさつ文を表示してみましょう<br></a>
<a href="getdate.htm"  onmouseover="return myIn(2)" onmouseout="return myOut()">Step.3 現在の日付と時間を表示してみましょう<br></a>
<a href="function.htm" onmouseover="return myIn(3)" onmouseout="return myOut()"> Step.4 関数化してHTMLソースリストを整理しましょう<br></a>

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

説明

ステータスバーにメッセージを表示させるためには、window.status にメッセージをセットするだけです。
window.status = "こんにちは";　

今回は、リンクの補足説明をステータスバーに表示させます。

onmouseover は、マウスカーソルがその上にきたときに、指定の関数や処理を実行します。
onmouseout は、マウスカーソルがそこから離れたときに、指定の関数や処理を実行します。

onmouseover="myIn(0)"
onmouseout="window.status=''"

配列変数に
myStatusTbl = new Array(4); // ハイパーリンク行の数
myStatusTbl[0] = "難易度：★☆☆☆☆☆☆☆☆☆"; // Step.1
myStatusTbl[1] = "難易度：★☆☆☆☆☆☆☆☆☆"; // Step.2
myStatusTbl[2] = "難易度：★☆☆☆☆☆☆☆☆☆"; // Step.3
myStatusTbl[3] = "難易度：★★☆☆☆☆☆☆☆☆"; // Step.4

と定義しておいて、それぞれの <a>で、
onmouseover="myIn(0)"　←Step.1
onmouseover="myIn(1)"　←Step.2
onmouseover="myIn(2)"　←Step.3
onmouseover="myIn(3)"　←Step.4
と、表示させたい myStatusTbl の配列番号をパラメータで指定します。

今回は、myIn() と myOut() という関数を作って使っていますが、
<a href="step1.htm" onmouseover="window.status='難易度：★☆☆☆☆☆☆☆☆☆'" onmouseout="window.status=''"> Step.1 いきなりJavaScriptを使ってみましょう</a>
と、直接書きこめば、関数定義は当然いらなくなります。

ところが、
IE5では、
windows.status = "難易度：★☆☆☆☆☆☆☆☆☆"
としても、ステータスバーに表示されません。

どうやら、ステータスバーに文字をセットした後に、return true; を追加すると表示されるようです。
window.status="'難易度：★☆☆☆☆☆☆☆☆☆'; return true;"

よってサンプルは、
onmouseover="myIn(0); return true;"
と記述しなければ、なりませんが、

myIn()で、
function myIn( myTblNo ) {
window.status = myStatusTbl[myTblNo];
return true;
}
のように、myIn() と myOut() も戻り値に true を返すようにしましたので、
onmouseover="return myIn(0);"
と記述します。

参考ステップ
Step.60 右から左へ流れるメッセージをステータスバーに表示してみましょう　

▲TOP