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

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

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



 

公開日 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 記述漏れを修正(変更点:ソース2)
2003.6.15 ver.2.2 大きさを文字幅に合わせるように改良(変更点:ソース1)
2003.11.4 ver.2.3 IE5.*での不具合を修正(変更点:ソース1)
2003.11.6 ver.2.4 記述ミスを修正(変更点:ソース1)
2004.3.15 ver.2.5 隠す部分の余白の設定を追加(変更点:ソース1)

 

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

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

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

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

4.ソース3を</body>の直前に書き込んでください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 ソース2を表示したい位置に増やしてください。
 その上で該当部分の数字を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>
隠す部分を消すリンクの文字を変更する。

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

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

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

ソース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>

ソース2(以下のソースを<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>


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


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


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