待機型
フリップチャート
ver.2.4
　
　◆サンプル
 
いやん♪(*/∇＼*)キャ
 
　 　 ＜機能と特徴＞
　
　・特定の部分を隠せます。
　　クリックすると隠していた部分が現れます。

　・ＴＶでよく使われるフリップのようなものです。

　・ブロック要素(前後に改行が入る)用になっています。

　・読み込み完了までクリックできないので
　　大きな画像などを隠す場合に向いています。
 



 

公開日 2002.8.25
最終更新日 2004.3.15
バージョン ver.2.4
動作確認 IE6.0,NN4.7,NN7.0,Opera7.0
cookie 不使用
CSS 使用
更新履歴 2002.9.10 ver2.0 スクリプトを簡略化　動作の安定化(変更点：全般)
2003.6.15 ver2.1 動作を若干改良(変更点：全般)
2003.11.4 ver2.2 IE5.*での不具合を修正(変更点：全般)
2003.11.6 ver2.3 Operaでの不具合を修正(変更点：ソース１)
2004.2.10 ver2.4 隠す部分の余白の設定を追加(変更点：ソース１)

 

☆★☆使い方☆★☆
 
 初心者向け解説   中級者向け解説   ダウンロード 

１．カスタマイズフォームを使って設定をしてください。

２．ソース１を<head>〜</head>の間に書き込んでください。

３．ソース２を<body>〜</body>の間の表示したい位置に書き込んでください。

４．ソース３を</body>の直前に書き込んでください。

５．ブラウザでテストしてみてください。
　　正常に動作すれば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 

１．ソース１を<head>〜</head>の間に書き込んでください。

２．ソース２を<body>〜</body>の間の表示したい位置に書き込んでください。

３．ソース３を<body>〜</body>の間に書き込んでください。
　　書き込む位置は一番最後にソース２を書き込んだ位置以降
　　ただし、それがテーブル内の場合は<table>〜</table>の外にしてください。
　　よくわからない場合は</body>の直前に書き込んでください。

４．ブラウザでテストしてみてください。
　　正常に動作すれば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 
 
■ダウンロードする形式を選択してください。

  【スクリプトを１つのページに組み込む】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。

２．右のボタンを押してファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は一括)】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。

２．右のボタンを押して外部ファイルをダウンロードしてください。
 
３．保存した外部ファイルのファイル名を入力してください。
　　 (ファイルのパスでも可)
 
４．右のボタンを押してHTMLファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は各ページ毎)】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。
 
２．右のボタンを押して外部ファイルをダウンロードしてください。
 
３．保存した外部ファイルのファイル名を入力してください。
　　 (ファイルのパスでも可)
 
４．右のボタンを押してHTMLファイルをダウンロードしてください。
 
５．複数のページが必要な場合は、カスタマイズフォームで設定をし
　　再度HTMLファイルのみダウンロードしてください。
 

 
 
 
 カスタマイズフォーム   補足説明   改造方法 
 
隠す部分を消すリンクの文字：
読みこみが終了するまでの文字：
隠す部分の色： (RGB値,色名)
隠す部分の余白： (半角数字：正の整数)
 
 【隠す部分の設定】 
設置するリンクの数：
☆★☆1個目のリンク☆★☆
 隠されるメッセージ： (タグ可) 
 
　
 カスタマイズフォーム   補足説明   改造方法 
 
■特にありません。
 
 カスタマイズフォーム   補足説明   改造方法 
 
■隠されるメッセージを変更する。

　ソース２の２行目を変更してください。
　文字以外にも画像などのタグも使用可能です。
<div id="f_w_kakusu1" class="f_w_ilayer">いやん♪(*/∇＼*)キャ</div>
■隠されるメッセージを増やす。

　ソース２を表示したい位置に増やしてください。
　その上で該当部分の数字を１つ増やしてください。
<table border="0" cellspacing="0" cellpadding="0"><tr><td>
<div id="f_w_kakusu1" class="f_w_ilayer">いやん♪(*/∇＼*)キャ</div>
</td></tr></table>
<script language="JavaScript" type="text/javascript"><!--
f_w_spacer(1);
// --></script>
■隠す部分を消すリンクの文字を変更する。

　//設定〜//ここまでの１行目を変更してください。 
f_w_mes   = 'クリックしてね';
■隠す部分を消す文字(読みこみが終わるまでのもの)を変更する。

　//設定〜//ここまでの２行目を変更してください。 
f_w_mes2  = '読み込み中だよ';
■隠す部分の色を変更する。(RGB値,色名)

　//設定〜//ここまでの３行目を変更してください。 
f_w_color = '#f2debd';
■隠す部分の余白を変更する。(半角数字：正の整数)

　//設定〜//ここまでの４行目を変更してください。 
 f_w_border = 1;
 
 
  

■ソース１(以下のソースを<head>〜</head>の間に書き込んでください)  
  
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
    //ver.2.3


//設定
f_w_mes    = 'クリックしてね'; //隠す部分を消すリンクの文字
f_w_mes2   = '読み込み中だよ'; //隠す部分を消すリンクの文字
f_w_color  = '#f2debd';        //隠す部分の色
f_w_border = 1;                //隠す部分の余白
//ここまで


if(f_w_color)
{f_w_color = 'bgcolor="'+f_w_color+'"';}


onload   = flip_load;
f_w_list = new Array();


function f_w_spacer(i)
{with(document)
 {if(document.all || document.getElementById)
  {open();
   write('<div id="f_w_lay'+i+'" class="f_w_layer"></div>\n');
   write('<div id="f_w_layer'+i+'" class="f_w_layer"></div>\n');
   close();}
  f_w_list[f_w_list.length] = i;}}


function flip_load()
{with(document)
 {if(document.all)
  {for(i in f_w_list)
   {all("f_w_layer"+f_w_list[i]).style.visibility = "hidden";}}
  else if(document.getElementById)
  {for(i in f_w_list)
   {getElementById("f_w_layer"+f_w_list[i]).style.visibility = "hidden";}}
  else if(document.layers)
  {for(i in f_w_list)
   {layers["f_w_layer"+f_w_list[i]].visibility = "hidden";}}}}


function flip_chartB(a)
{f_w_t   = '<table border="0" cellspacing="0" cellpadding="1" width="';
 f_w_t2  = '" height="';
 f_w_t3  = '"><tr>\n<td align="center" '+f_w_color+' nowrap>';
 f_w_t4  = '';
 f_w_t5  = '';
 f_w_posi= '';
 if(!a)
 {f_w_t3 += '<a href="JavaScript:f_w_hidden(';
  f_w_t4 += ')">'+f_w_mes;
  f_w_t5 += '</a>';}
 else
 {f_w_t4 += f_w_mes2;
  f_w_posi= 'er';}
 f_w_t5 +='</td>\n</tr></table>\n';
 with(document)
 {if(document.all)
  {for(ii in f_w_list)
   {i = f_w_list[ii];
    all("f_w_kakusu"+i).style.position = "absolute";
    if(all("f_w_kakusu"+i).offsetLeft == 0 && readyState != "complete")
    {onload = flip_chartB;
     return;}
    all("f_w_kakusu"+i).style.position = "relative";
    f_w_W = all("f_w_kakusu"+i).offsetWidth;
    f_w_H = all("f_w_kakusu"+i).offsetHeight;
    if(a)
    {f_w_T = f_w_t+f_w_W+f_w_t2+f_w_H+f_w_t3+f_w_t4+f_w_t5;}
    else
    {f_w_T = f_w_t+f_w_W+f_w_t2+f_w_H+f_w_t3+i+f_w_t4+f_w_t5;}
    all("f_w_kakusu"+i).style.position   = "absolute";
    all("f_w_lay"+f_w_posi+i).innerHTML  = f_w_T;
    all("f_w_lay"+f_w_posi+i).style.left = all("f_w_kakusu"+i).offsetLeft;
    all("f_w_lay"+f_w_posi+i).style.top  = all("f_w_kakusu"+i).offsetTop;
    all("f_w_kakusu"+i).style.position   = "relative";}}
  else if(document.getElementById)
  {for(ii in f_w_list)
   {i = f_w_list[ii];
    f_w_W = getElementById("f_w_kakusu"+i).offsetWidth;
    f_w_H = getElementById("f_w_kakusu"+i).offsetHeight;
    if(a)
    {f_w_T = f_w_t+f_w_W+f_w_t2+f_w_H+f_w_t3+f_w_t4+f_w_t5;}
    else
    {f_w_T = f_w_t+f_w_W+f_w_t2+f_w_H+f_w_t3+i+f_w_t4+f_w_t5;}
    getElementById("f_w_lay"+f_w_posi+i).innerHTML = f_w_T;
    getElementById("f_w_lay"+f_w_posi+i).style.left = getElementById("f_w_kakusu"+i).offsetLeft;
    getElementById("f_w_lay"+f_w_posi+i).style.top  = getElementById("f_w_kakusu"+i).offsetTop;}}
  else if(document.layers)
  {for(ii in f_w_list)
   {i = f_w_list[ii]
    f_w_W = layers["f_w_kakusu"+i].clip.width;
    f_w_H = layers["f_w_kakusu"+i].clip.height;
    if(a)
    {f_w_T = f_w_t+f_w_W+f_w_t2+f_w_H+f_w_t3+f_w_t4+f_w_t5;}
    else
    {f_w_T = f_w_t+f_w_W+f_w_t2+f_w_H+f_w_t3+i+f_w_t4+f_w_t5;}
    open();
    write('<div id="f_w_lay'+f_w_posi+i+'" class="f_w_layer">\n'+f_w_T+'</div>\n');
    close();
    layers["f_w_lay"+f_w_posi+i].top  = layers["f_w_kakusu"+i].pageY;
    layers["f_w_lay"+f_w_posi+i].left = layers["f_w_kakusu"+i].pageX;}}}
 if(!a && document.readyState != "complete")
 {flip_chartB(1);}}


function f_w_hidden(i)
{with(document)
 {if(document.all)
  {all("f_w_lay"+i).style.visibility    = "hidden";
   all("f_w_kakusu"+i).style.visibility = "visible";}
  else if(document.getElementById)
  {getElementById("f_w_lay"+i).style.visibility    = "hidden";
   getElementById("f_w_kakusu"+i).style.visibility = "visible";}
  else if(document.layers)
  {layers["f_w_lay"+i].visibility    = "hidden";
   layers["f_w_kakusu"+i].visibility = "visible";}}}


with(document)
{open();
 write('<style type="text/css">\n<!-\-\n');
 write('.f_w_ilayer{position:relative;visibility:hidden;}\n');
 write('.f_w_layer {position:absolute;visibility:visible;}\n');
 write('-\->\n<\/style>\n');
 close();}


// -->
</script>

■ソース２(以下のソースを<body>〜</body>の間に書き込んでください)  
  
<!--1個目の隠されるメッセージ-->
<table border="0" cellspacing="0" cellpadding="0"><tr><td>
<div id="f_w_kakusu1" class="f_w_ilayer">いやん♪(*/∇＼*)キャ</div>
</td></tr></table>
<script language="JavaScript" type="text/javascript"><!--
f_w_spacer(1);
// --></script>

■ソース３(以下のソースを</body>の直前に書き込んでください)  
  
<script language="JavaScript" type="text/javascript"><!--
flip_chartB();
// --></script>


■スクリプト無効時には動作しません。
　隠される部分はそのまま表示されます。
 
☆スクリプト無効時の表示サンプル　
 
いやん♪(*/∇＼*)キャ

ウェブ木箱＞サンプル集
copyright(C) 2002-2004 あう