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

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

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



 

公開日 2002.7.08
最終更新日 2004.3.15
バージョン ver.2.5
動作確認 IE6.0,NN4.7,NN7.0,Opera7.0
cookie 不使用
CSS 使用
更新履歴 2002.8.25 ver.1.1 表示を高速化(変更点：全般)
2002.9.10 ver.2.0 スクリプトを簡略化　動作の安定化(変更点：全般)
2002.9.24 ver.2.1 記述漏れを修正(変更点：ソース２)
2003.6.15 ver.2.2 大きさを文字幅に合わせるように改良(変更点：ソース１)
2003.11.4 ver.2.3 IE5.*での不具合を修正(変更点：ソース１)
2003.11.6 ver.2.4 記述ミスを修正(変更点：ソース１)
2004.3.15 ver.2.5 隠す部分の余白の設定を追加(変更点：ソース１)

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　//設定〜//ここまでの１行目を変更してください。 
 f_mes    = 'クリックしてね';
■隠す部分の色を変更する。(RGB値,色名)

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

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

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


//設定
f_mes    = 'クリックしてね'; //隠す部分を消すリンクの文字
f_color  = '#f2debd';        //隠す部分の色
f_border = 1;                //隠す部分の余白
//ここまで


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


f_list = new Array();
f_t  = '<table border="0" cellspacing="0" cellpadding="1" width="';
f_t2 = '" height="';
f_t3 = '">\n<tr>\n<td align="center" '+f_color+' nowrap>\n<a href="JavaScript:f_hidden(';
f_t4 = ')">'+f_mes+'</a></td>\n</tr></table>';


function f_spacer(i)
{with(document)
 {if(document.all || document.getElementById)
  {open();
   write('<div id="f_lay'+i+'" class="f_layer"></div>');
   close();}
  f_list[f_list.length] = i;}}


function flip_chart()
{with(document)
 {if(document.all)
  {for(ii in f_list)
   {i = f_list[ii];
    all("f_kakusu"+i).style.position = "absolute";
    if(all("f_kakusu"+i).offsetLeft == 0 && readyState != "complete")
    {onload = flip_chart;
     return;}
    all("f_kakusu"+i).style.position = "relative";
    f_W = all("f_kakusu"+i).offsetWidth;
    f_H = all("f_kakusu"+i).offsetHeight;
    f_T = f_t+f_W+f_t2+f_H+f_t3+i+f_t4;
    all("f_lay"+i).innerHTML = f_T;
    all("f_kakusu"+i).style.position = "absolute";
    all("f_lay"+i).style.left = all("f_kakusu"+i).offsetLeft;
    all("f_lay"+i).style.top  = all("f_kakusu"+i).offsetTop;
    all("f_kakusu"+i).style.position = "relative";}}
  else if(document.getElementById)
  {for(ii in f_list)
   {i = f_list[ii];
    f_W = getElementById("f_kakusu"+i).offsetWidth;
    f_H = getElementById("f_kakusu"+i).offsetHeight;
    f_T = f_t+f_W+f_t2+f_H+f_t3+i+f_t4;
    getElementById("f_lay"+i).innerHTML = f_T;
    getElementById("f_lay"+i).style.left = getElementById("f_kakusu"+i).offsetLeft;
    getElementById("f_lay"+i).style.top  = getElementById("f_kakusu"+i).offsetTop;}}
  else if(document.layers)
  {for(ii in f_list)
   {i = f_list[ii]
    f_W = layers["f_kakusu"+i].clip.width;
    f_H = layers["f_kakusu"+i].clip.height;
    f_T = f_t+f_W+f_t2+f_H+f_t3+i+f_t4;
    open();
    write('<div id="f_lay'+i+'" class="f_layer">\n'+f_T+'</div>');
    close();
    layers["f_lay"+i].top  = layers["f_kakusu"+i].pageY;
    layers["f_lay"+i].left = layers["f_kakusu"+i].pageX;}}}}


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


with(document)
{open();
 write('<style type="text/css">\n<!-\-\n');
 write('.f_ilayer{position:relative;visibility:hidden;}\n');
 write('.f_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_kakusu1" class="f_ilayer">いやん♪(*/∇＼*)キャ</div>
</td></tr></table>
<script language="JavaScript" type="text/javascript"><!--
f_spacer(1);
// --></script>

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


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

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