CSS版ページページインジケータ

◆解説

これはフレーム間で特定の要素のクラス名を変える手法を使用したページインジケータです

基本的な構造は CSS連動ページと同じで、フレームの親とページの切り替えで変化する同期対象の子フレーム、同期元の子フレームの３つに分かれます

■JavaScript( フレームの親 )
この文字はカスタマイズ項目です

content_name = 'menu'; // 同期対象のフレーム名
current_url  = null;   // "main"フレームに表示中の URL
load_menu    = 0;      // 同期対象のフレームの状態
function load_url(url){
  if(current_url == url) return;
  current_url = url;
  if(load_menu){
    if(window.frames[content_name].pi_act){
      window.frames[content_name].pi_act(url);
    }
  }
}

■前提とする HTML要素

<frameset cols="30%,*">
  <frame src="menu.htm"  name="menu">
  <frame src="main1.htm" name="main">
</frameset>

この例では "main"フレームの内容が変わると "menu"フレームのスタイルが代わります

同期対象( "menu"フレーム )のスクリプトは以下のものです

■JavaScript( 同期対象のフレーム:menu.htm )
この文字はカスタマイズ項目です

cls_ai = 'act';   // 表示中の項目に適用するクラス名
cls_di = 'noact'; // 非表示中の項目に適用するクラス名
aitem  = null;    // 現在表示中の項目の要素
function pi_act(url){
  if(!document.getElementsByTagName) return;
  var elements = document.getElementsByTagName('a');
  var nitem = null;
  // クラス名を探索する
  for(var i=0; i<elements.length; i++){
    if(elements[i].href != url) continue;
    for(var e=elements[i]; e; e=e.parentNode){
      if(e.className && e.className == cls_di){
        nitem = e; break;
      }
    }
    break;
  }
  // クラスを変更する
  if(nitem){
    if(aitem && aitem != nitem) aitem.className = cls_di;
    nitem.className = cls_ai;
    aitem = nitem;
  }
  return false;
}
function pi_init(){
  var win = window.top;
  if(win.current_url) pi_act(win.current_url);
  win.load_menu = 1;
}
function pi_closure(){
  window.top.load_menu = 0;
}

■前提とする HTML要素

<body onload="pi_init();" onunload="pi_closure();">
    :
<span class="noact">
      <a href="pi_main1.htm" target="main">main1</a>
</span>
    :

リンクする要素は A タグのみで、その要素または要素の祖先の要素に変更するクラス名を持つ要素があることが前提です
つまり、クラス名を変更する要素の子の構成は、子孫に Aタグがある限り自由にできます

例えは、具体的にはこんな風にします

■HTML要素(例)

<style type="text/css">
/* 非表示中ページのスタイル */
.noact   { color: #339966; margin-left:13px; }
.noact a { color: #336699; }
.noact .here { display:none; }
/* 表示中ページのスタイル */
.act   { color: #ff00cc; font-size: 1.3em; font-weight:bold; }
.act a { color: #0000ee; }
</style>
    :
<span class="noact">
  <img class="here" src="OPEN.gif" width=13 height=13>
  <a href="pi_main1.htm" target="main">page 1</a>
</span><br>
<span class="noact">
  <img class="here" src="OPEN.gif width=13 height=13">
  <a href="pi_main2.htm" target="main">page 2</a>
</span><br>

同期元ページ( "main"フレーム )のスクリプトは以下のものです

■JavaScript( 同期元のフレーム:main.htm )
この文字はカスタマイズ項目です

function load_url(url){} // ダミー関数

*3 ここで記述している load_url 関数は、このページを単独で表示された場合にエラーにしないための記述で、実際には使用されません

■前提とする HTML要素

    :
<body onload="window.top.load_url(window.location.href);">
    :

◆注意とヒント

●このスクリプトは IE5.5, IE6, Mozilla1.4( 以上 Windows ), で確認しています
これより古いバージョンのブラウザでは正常に動作しないかもしれません

●Opera(Win版 7.03, Linux版 7.20Beta7)では「戻る」操作で onload イベントが発生しないようで、「戻る」操作をしてもメニュー側の表示は更新されません

●Safari1.0(Mac 10.2), Konqueror3.1(Linux)では Aタグの href属性で得られる値が記述した値なので変更対象の要素を探索できず、動作しません

もし、Safari, Konquerorでも動作させたい場合は URL の代わりに id属性を使用するなど、別の指標を使用して探索する必要があります

●サンプルではメニュー項目にアイコンを表示させていますがこのスクリプトはクラス名を変更するスクリプトなので、対象は画像だけでなく説明文の表示切り替えやデザインの変更などもスクリプトの修正なしで実現することができ、応用はアイディア次第ってことでしょうか f(^^;

CSS版ページインジケータ

◆解説

◆注意とヒント