ページの装飾に関するTips


・イメージを利用したガイドメッセージ

NN2No Good NN3OK NN4OK MozillaOK IE3No Good IE4OK

ページのリンクにガイダンスを使用したいケースが時々あります。

解説をページに記述しても良いのですが、ページをすっきりさせたいこともあります。

このような場合、ステータス領域を利用するのも手ですが、 ブラウザの設定によってはガイダンスに気が付かない場合や リンク先の確認をする場合はかえって邪魔にもなります。

そこで、ガイダンスを表示する領域を設け、ここに表示するのはどうでしょう。

表示する領域は 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>

実際のサンプルはこちらです。


注意事項

caution
JavaScript1.0 の仕様でもガイダンスが見える必要がある場合は、 イメージではなく、form のテキスト入力域に表示させる方が良いでしょう。 (但し、JavaScriptのバージョンで切替える必要はありませんが、 JavaScript をサポートしているかどうかで、 ガイダンス表示領域を設けるかどうかを切り替えた方が良いでしょう)
IE3
IE3.0 には SCRIPTタグのバージョンを無視して実行するものがあります。 このスクリプトはそれを考慮していません。 もし、このバージョンのブラウザも考慮するなら imgObjs関数内で判定し Imageオブジェクトの生成処理を無視する必要があります。 詳細に関しては「色々なバージョン」を参照してください。

Copyright(c) 1998 - 2001 ShinSoft. All rights reserved.