堀北真希うさぎ
主な作品
アイドルをモデルにした創作キャラクタを用いたイラストの一例とそれを組み込んだアニメーション動画

ページ案内▼

リンク解説表示機能。

メニューなどのそばに表示させる事で、アンカーにマウスカーソルをあてがうだけでリンク先の説明などをテキストで表示するものです。

リンク解説表示機能・目次。

リンク解説表示機能スクリプトのサンプル。

スクリプトを実行できる環境なら、メニューの下にフォームが表示され、リンクをポイントするとリンク先の説明が表示されます。

スクリプトを実行できない環境でも、フォームは表示されませんが、メニューは問題無く利用できます。

リンク解説表示機能スクリプトのソース。

リンク解説表示スクリプト「MenuGuidance.js」は以下の通りです。

width=48;
height=2;
ex_menu=new Array();
ex_menu[0]='　日本で最もアクセスされているポータルサイトです。';
ex_menu[1]='　情報量や精度では最も評価の高い検索エンジンです。';
ex_menu[2]='　日本最大の通販サイト『楽天市場』が運営する総合ポータルサイトです。';
document.write(
    '<form action="#">'+
    '<div>解説：<textarea name="explain1" wrap="soft" cols="'+width+'" rows="'+height+'"></textarea></div>'+
    '</form>'
    );
function put2form(str) {
    i=document.forms.length;
    while (--i>=0) {
        if (document.forms[i].explain1) {
            document.forms[i].explain1.value=ex_menu[str];
            break;
            }
        }
    }

HTML文書側での準備。

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

<ul>
    <li><a onmouseover="put2form(0)" onfocus="put2form(0)" href="http://www.yahoo.co.jp/">ヤフージャパン</a></li>
    <li><a onmouseover="put2form(1)" onfocus="put2form(1)" href="http://www.yahoo.co.jp/" href="http://www.google.co.jp/">グーグル日本</a></li>
    <li><a onmouseover="put2form(2)" onfocus="put2form(2)" href="http://www.yahoo.co.jp/" href="http://www.infoseek.co.jp/">インフォシーク</a></li>
    </ul>
<script type="text/javascript" charset="shift_jis" src="MenuGuidance.js"></script>

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

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

スクリプトの流れ。

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

  1. 必要な初期設定をする。
  2. フォームを書出す。
  3. 表示函数本体。

1. 必要な初期設定をする。

スクリプト冒頭の以下の部分が必要な初期設定です。

width=48;
height=2;
ex_menu=new Array();
ex_menu[0]='　日本で最もアクセスされているポータルサイトです。';
ex_menu[1]='　情報量や精度では最も評価の高い検索エンジンです。';
ex_menu[2]='　日本最大の通販サイト『楽天市場』が運営する総合ポータルサイトです。';

2. フォームを書出す。

document.write(
    '<form action="#">'+
    '<div>解説：<textarea name="explain1" wrap="soft" cols="'+width+'" rows="'+height+'"></textarea></div>'+
    '</form>'
    );

フォームの<textarea>要素に、name="explain1"属性が与えられています。フォームの幅はcols属性で、高さはrows属性でそれぞれ与えます。

3. 表示函数。

function put2form(str) {
    i=document.forms.length;
    while (--i>=0) {
        if (document.forms[i].explain1) {
            document.forms[i].explain1.value=ex_menu[str];
            break;
            }
        }
    }

この函数の動作を解説すると以下のようになります。

  1. まず「i=document.forms.length;」で文書中の<form>の個数を調べます。<form>要素はFormオブジェクトとしてスクリプトが処理できます。Formオブジェクトは「document.forms[]」という配列となっており、この中から適切なオブジェクトを探す事になります。それにはまずFormオブジェクトの個数を調べる必要があります。「document.forms.length」で「document.forms[]」の要素の個数、すなわちFormオブジェクトの個数を得られます。
  2. 「if (document.forms[i].explain1) {」は撰んだFormオブジェクトの下位にexplain1オブジェクトがあれば実行されるというものです。スクローリングメッセージを表示している<textarea>要素には「name="explain1"」属性が与えられていました。
  3. 以下の部分でメッセージを表示します。 
    document.forms[i].explain1.value=ex_menu[str];

    具体的には「document.forms[i].explain1.value」に呼出時に指定された番号の「ex_menu[str]」を代入するだけです。最後に必要な動作が終わったのでもうフォーム探しも不要となり、break文で脱出します。

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

marguerite.site@gmail.com