フリップチャートi
ver.2.3
 
 ◆サンプル
 
問題:次の方程式の解を求めよ

2x+10 = わかりまちぇん(涙)
だからわかりまちぇんって(涙)


こんなところから[壁]д・)ノチラッなんてことも
 
    <機能と特徴>
 
 ・特定の部分を隠せます。
  クリックすると隠していた部分が現れます。

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

 ・インライン(前後に改行が入らない)で使用できます。
 



 

公開日 2002.9.10
最終更新日 2003.11.6
バージョン ver.2.3
動作確認 IE6.0,NN4.7,NN7.0,Opera7.0
cookie 不使用
CSS 使用
更新履歴 2002.09.24 ver1.1 記述漏れを修正(変更点:ソース2)
2003.06.15 ver2.0 スクリプトを簡略化(変更点:ソース全般)
2003.08.30 ver2.1 Operaでの不具合を修正(変更点:ソース全般)
2003.11.04 ver2.2 IE5.*での不具合を修正(変更点:ソース全般)
2003.11.06 ver2.3 Operaでの不具合を修正(変更点:ソース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ファイルのみダウンロードしてください。
 

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

 ソース2の2行目を変更してください。
 文字以外にも画像などのタグも使用可能です。
<div id="f_i_kakusu1" class="f_i_ilayer">[壁]д・)ノチラッ</div>
隠されるメッセージを増やす。

 ソース2を表示したい位置に増やしてください。
 その上で該当部分の数字を1つ増やしてください。
<span id="f_i_kakusu1" class="f_i_ilayer">[壁]д・)ノチラッ</span>
<script language="JavaScript" type="text/javascript"><!--
f_i_spacer(1);
// --></script>
隠す部分を消すリンクの文字を変更する。

 //設定〜//ここまでの1行目を変更してください。
f_i_mes   = 'クリックしてね';
 
 
  

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

//設定 f_i_mes = 'クリックしてね'; //隠す部分を消すリンクの文字 //ここまで
f_i_list = new Array(); f_i_t = '<table border="0" cellspacing="0" cellpadding="0">\n<tr>'; f_i_t += '<td nowrap>\n<a href="JavaScript:f_i_hidden('; f_i_t2 = ')">'+f_i_mes+'</a></td>\n</tr></table>';
function f_i_spacer(i) {with(document) {if(document.all || document.getElementById) {open(); write('<div id="f_i_lay'+i+'" class="f_i_layer"></div>'); close();} f_i_list[f_i_list.length] = i;}}
function flip_chartC() {with(document) {if(document.all) {for(ii in f_i_list) {i = f_i_list[ii]; if(all("f_i_posi"+i).offsetLeft == 0 || readyState != "complete") {onload = flip_chartC; return;} f_i_T = f_i_t+i+f_i_t2; all("f_i_lay"+i).innerHTML = f_i_T; all("f_i_lay"+i).style.left = all("f_i_posi"+i).offsetLeft; all("f_i_lay"+i).style.top = all("f_i_posi"+i).offsetTop; if(navigator.userAgent.indexOf("Opera") != -1) {all("f_i_lay"+i).style.left = all("f_i_posi"+i).offsetLeft;}}} else if(document.getElementById) {for(ii in f_i_list) {i = f_i_list[ii]; f_i_W = getElementById("f_i_kakusu"+i).offsetWidth; f_i_H = getElementById("f_i_kakusu"+i).offsetHeight; f_i_T = f_i_t+i+f_i_t2; getElementById("f_i_lay"+i).innerHTML = f_i_T; getElementById("f_i_lay"+i).style.left = getElementById("f_i_kakusu"+i).offsetLeft; getElementById("f_i_lay"+i).style.top = getElementById("f_i_kakusu"+i).offsetTop;}} else if(document.layers) {for(ii in f_i_list) {i = f_i_list[ii] f_i_W = layers["f_i_kakusu"+i].clip.width; f_i_H = layers["f_i_kakusu"+i].clip.height; f_i_T = f_i_t+i+f_i_t2; open(); write('<div id="f_i_lay'+i+'" class="f_i_layer">\n'+f_i_T+'</div>'); close(); layers["f_i_lay"+i].top = layers["f_i_kakusu"+i].pageY; layers["f_i_lay"+i].left = layers["f_i_kakusu"+i].pageX}}}}
function f_i_hidden(i) {with(document) {if(document.all) {all("f_i_lay"+i).style.visibility = "hidden"; all("f_i_kakusu"+i).style.visibility = "visible";} else if(document.getElementById) {getElementById("f_i_lay"+i).style.visibility = "hidden"; getElementById("f_i_kakusu"+i).style.visibility = "visible";} else if(document.layers) {layers["f_i_lay"+i].visibility = "hidden"; layers["f_i_kakusu"+i].visibility = "visible";}}}
with(document) {open(); write('<style type="text/css">\n<!-\-\n'); write('.f_i_ilayer{position:relative;visibility:hidden;}\n'); if(document.all && navigator.userAgent.indexOf("Opera") == -1) {write('.f_i_posi {position:absolute;visibility:hidden;}\n');} else {write('.f_i_posi {position:relative;visibility:hidden;}\n');} write('.f_i_layer {position:absolute;visibility:visible;}\n'); write('-\->\n<\/style>\n'); close();}
// --> </script>

ソース2(以下のソースを<body>〜</body>の間に書き込んでください)  
 
<!--1個目の隠されるメッセージ-->
<span id="f_i_posi1" class="f_i_posi">
</span><span id="f_i_kakusu1" class="f_i_ilayer">[壁]д・)ノチラッ</span>
<script language="JavaScript" type="text/javascript"><!--
f_i_spacer(1);
// --></script>


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


スクリプト無効時には動作しません。
 隠される部分はそのまま表示されます。
 
☆スクリプト無効時の表示サンプル 
 
2x+10 = わかりまちぇん(涙)
だからわかりまちぇんって(涙)


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