ページのリンクにガイダンスを使用したいケースが時々あります。
解説をページに記述しても良いのですが、ページをすっきりさせたいこともあります。
このような場合、ステータス領域を利用するのも手ですが、
ブラウザの設定によってはガイダンスに気が付かない場合や
リンク先の確認をする場合はかえって邪魔にもなります。
そこで、ガイダンスを表示する領域を設け、ここに表示するのはどうでしょう。
表示する領域は Form を用いて text 入力域でも用は足せるのですが、 ガイダンスをイメージにして、イメージをダイナミックに変化させることもできます。
以下に示すコードは、リンク上にマウスポインタが来た時、 関連するガイダンスイメージを表示するものです。 (但し、image オブジェクトは JavaScript 1.1 の追加仕様のため、 古いバージョンでは無処理にしています)
<script language="JavaScript"><!-- // ダミー関数 function setImage(idx){} // --></script> <script language="JavaScript1.1"><!-- imgs = new imgObjs(); // 画像の定義 function imgObjs(){ var i=0; this[i]=new Image(); this[i].src="msg0.gif"; i++; this[i]=new Image(); this[i].src="msg1.gif"; i++; this[i]=new Image(); this[i].src="msg2.gif"; i++; this[i]=new Image(); this[i].src="msg3.gif"; i++; this[i]=new Image(); this[i].src="msg4.gif"; i++; this[i]=new Image(); this[i].src="msg5.gif"; i++; this[i]=new Image(); this[i].src="msg6.gif"; i++; this.length=i; return this; } // 画像の切替関数 function setImage(idx){ if(imgs.length>0) document.msg.src=imgs[idx].src; } // --></script> </head> <body ...> : <img src="msg0.gif" name="msg" id="msg">
この文字の部分は必要に応じて修正します。
imgObjsは切り替える画像で、
全て同じサイズ(幅、高さ)の画像を指定します。
setImage関数では切り替える対象の Imageオブジェクトを
指定します。
このサンプルでは IMGタグにつけた名称 "msg" にしています。
IMG タグは
基本的に初期表示状態の画像( 一般的には透明な画像 )を指定しておき、
必要に応じて切り替えます。
そして、必ず setImage関数からアクセスできるように
名称( name属性 )をつけます。
画像を切り替えるには setImage 関数を呼び出します。
この関数の呼出形式は以下の通りです。
setImage(idx) idx : imgObjs 配列の要素番号( 0 〜 )
使用方法
先ず、変更対象のイメージを
<img src="msg0.gif" name="msg">
という具合に、名称を付けた画像を定義します。
次に、リンクに触れるとガイド表示するなら
Aタグに onMouseOver, onMouseOut イベントを定義し setImage関数を呼び出します。
<a href="hoge.htm" onMouseOver="setImage(1);" onMouseOut="setImage(0)">...</a>
実際のサンプルはこちらです。
注意事項