堀北真希うさぎ
主な作品
制作者のオリジナルキャラクタを用いたイラストの一例とアニメーション動画

ページ案内▼

アンカーのポイントで画像を変える。

リンク解説表示機能ではフォーム内のテキストを変更することが出来ましたが、JAVAスクリプトにある「一度表示させた画像を後から差し替えられる機能」を用いれば、アンカーをマウスがポイントする度に画像を切替えることも出来ます。

アンカーのポイントで画像を変える・目次。

アンカーのポイントで画像を変えるスクリプトのサンプル。

ネットスケープ 2.x以外のスクリプトを実行でき、画像を表示できる環境なら、日本の代表的な検索エンジンの一覧の上に画像が表示され、リンクをポイントするとその画像がリンク先の検索エンジンのロゴマークに置き換わります。

それ以外の環境でも、メニューは問題無くご利用になれます。

アンカーのポイントで画像を変えるスクリプトのソース。

アンカーのポイントで画像を変えるスクリプト「MenuGuidanceWithImages.js」は以下の通りです。

guide_name="Guide";
guide_ext=".GIF";
guide_width=62;
guide_height=62;
guide=new new Array();

//	対象となる画像を検索。
guide_imageNO=document.images.length;
while (--guide_imageNO>=0) {
    if (document.images[guide_imageNO].src.indexOf(guide_name)>=0) break;
    }

//    切り替える画像を登録。
if (document.images) {
    i=3;
    while (--i>=0) {
        guide[i]=new Image(); guide[i].src=guide_name+i+guide_ext;
        }
    }

//    実際の画像切替。
function guideG(num) {
    if (document.images && guide_imageNO>-1) {
        document.images[guide_imageNO].src=guide[num].src;
        }
    }

HTML文書側での準備。

今回は、HTML文書側にも細工が必要になります。

<ul class="images">
    <li><img alt="" src="Guide.GIF" width="62" height="62" /></li>
    </ul>
<script type="text/javascript" charset="shift_jis" src="MenuGuidanceWithImages.js"></script>
<ul>
    <li><a onmouseover="guideG(0)" onfocus="guideG(0)" href="http://www.yahoo.co.jp/">ヤフージャパン</a></li>
    <li><a onmouseover="guideG(1)" onfocus="guideG(1)" href="http://www.yahoo.co.jp/" href="http://www.google.co.jp/">グーグル日本</a></li>
    <li><a onmouseover="guideG(2)" onfocus="guideG(2)" href="http://www.yahoo.co.jp/" href="http://www.infoseek.co.jp/">インフォシーク</a></li>
    </ul>

onmouseover属性は、アンカーにマウスカーソルがあてがわれた時点で起動するスクリプトを指定します。この場合、「onfocus(i)」という函数を起動する事になります。

onfocus属性は、当該アンカーがフォーカスされた状態(TABキーでカーソルが当該アンカー上に来た場合など)になったときに起動するスクリプトを指定します。

スクリプトの流れ。

このスクリプトの流れは、以下のようになります。

  1. 前処理
    1. 変数の初期設定
    2. 切り替え先の画像の特定
    3. 切り替えに使う画像の登録
  2. 画像切替処理本体

前処理。

先ず、必要な前処理を行います。

変数の初期設定。

先ず必要な変数を設定します。

guide_name="Guide";
guide_ext=".GIF";
guide_width=62;
guide_height=62;
guide=new new Array();

まず、

  1. guide_name="画像ファイル名";」で表示させる画像の名前を指定しておきます。
  2. その後の「guide_ext=".画像拡張子";」で取扱う画像の拡張子を指定します。
  3. また、「guide_width」「guide_height」でそれぞれ表示させたい画像の横幅と高さを指定します。

続いて、「guide=new Array();」で表示させる画像を収めた配列変数を宣言します。

切り替え先の画像の特定。

続いてどの画像を切り替えの対象にするかを決め、表示させる画像を予め読込みます。

//	対象となる画像を検索。
guide_imageNO=document.images.length;
while (--guide_imageNO>=0) {
    if (document.images[guide_imageNO].src.indexOf(guide_name)>=0) break;
    }

こうする事で、HTML文書で表示する画像を追加, 削除, 或いは並べ替えを行っても、画像が特定出来るようになります。

HTML文書内の画像オブジェクト配列document.images[]オブジェクトについて、後ろから順番に画像のURLを srcプロパティで調べます。

該当する画像オブジェクト要素が見付かった場合にはそこで処理を打ち切ります。

その結果、変数 guide_imageNO には該当する画像の番号が入る事となります。

切り替えに使う画像の登録。

最後の準備として、切替に用いる画像を登録します。

//    切り替える画像を登録。
if (document.images) {
    i=3;
    while (--i>=0) {
        guide[i]=new Image(); guide[i].src=guide_name+i+guide_ext;
        }
    document.write('<div><img alt="" src="'+guide_name+guide_ext+'" width="'+guide_width+'" height="'+guide_height+'" /></div>');
    }

「if (document.images) {」で画像を取り扱える事を確認した上で、四枚の画像のURLを登録します(この時に登録した画像は自動的に読込まれます)。

  1. まず、「new Image」でImageオブジェクト型変数とし、
  2. そのsrcプロパティにURLを文字列演算で求めてセットします。

画像切替処理本体。

この函数はアンカーにマウスカーソルがあてがわれた時点でonmouseover属性に依って、また、キーボードでフォーカスを当該アンカー上に移動させた際にonfocus属性に依って、それぞれ起動されるものとなっております。

//    実際の画像切替。
function guideG(num) {
    if (document.images && guide_imageNO>-1) {
        document.images[guide_imageNO].src=guide[num].src;
        }
    }

「if (document.images && guide_imageNO>-1) {」で

を確認した上で、切り替えの対象となる画像のURL,すなわちsrcプロパティを引き数 num で指定した配列変数 guide の要素のsrcプロパティ値にする事で画像を切り替えます。

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com