JavaScript 　

JavaScriptの便利な使い方を紹介します。

　 ＣＧを表示するＨＴＭＬファイルを自動で作る 　
　 ＣＧをネットで公開するにはＣＧの枚数分だけＨＴＭＬファイルを作るのが普通ですが、このスクリプトを使えば同じようなファイルを作る必要はなくなります。
実際に動いているところは ここ で確認できます。

利点：手間と容量の節約になる。

欠点：JavaScriptに対応していないブラウザの人を切り捨てることになる。

作り方１ ：すぐに使ってみたい人用
作り方２ ：仕組みを理解して応用してみたい人用
作り方１
まずテンプレートファイルを作ります。これは実際にＣＧを表示する雛型となります。
例えば こんな 感じです。

次にサムネイルのメニュー用のＨＴＭＬファイルを作ります。これは通常と同じように作っていくのですが、サムネイルのイメージタグに

onClick='top.changeImage("タイトル名","画像ファイル名","コメント");'

というのを付け加えます。これによりサムネイルをクリックすることで別のフレームにテンプレートファイルの内容を基本としたページが作成されます。

作り方２のcg_menu.htmlも参考にしてください。

次に作り方２のcg.htmlをコピーしてＨＴＭＬファイルとして保存します。ファイル名の部分は適当に変えておいて下さい。そのファイル内のvar doc1='・・・・となっているところにテンプレートの始めからＣＧのタイトル名の前までを入れます。同様にdoc2='・・・・にはタイトルからイメージタグの前までを入れます。doc3にはイメージタグからコメントの前まで。doc4にはコメントの終わりから残り全部を入れます。作り方２のcg.htmlも参考にしてください。

以上で一応終わりです。cg.htmlファイルを開いてみてください。

正常に動作しない場合は takashi@ngy1.1st.ne.jp か 掲示板 に書き込んでおいてください。

　

作り方２
まず僕が使ったファイルを公開します。

フレームの定義

<!----cg.html---->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<title>/////作画/////
<script language="javascript">
<!--
var doc1='<html><head>・・中略・・<font color="#FFFFFF"><strong>';
var doc2='</strong></font>・・中略・・<td align="center" bgcolor="#808080">';
var doc3='</td>・・中略・・<font color="#FFFFFF">';
var doc4='</font></td>・・中略・・</table></center></body></html>';

function changeImage(image_name,image_file,image_comment){
 var image_state='<img src="'+image_file+'">';
 if(document.layers){
  frames['main'].document.open();
  frames['main'].document.write(doc1);
  frames['main'].document.write(image_name);
  frames['main'].document.write(doc2);
  frames['main'].document.write(image_state);
  frames['main'].document.write(doc3);
  frames['main'].document.write(image_comment);
  frames['main'].document.write(doc4);
  frames['main'].document.close();
 }
 if(document.all){
  frames('main').document.open();
  frames('main').document.write(doc1);
  frames('main').document.write(image_name);
  frames('main').document.write(doc2);
  frames('main').document.write(image_state);
  frames('main').document.write(doc3);
  frames('main').document.write(image_comment);
  frames('main').document.write(doc4);
  frames('main').document.close();
 }
}
//-->
</script>
<frameset cols="25%,*" frameborder="0">
<frame src="cg_menu.html" name="menu">
<frame src="" name="main">
</frameset>
</head>
<body>
フレーム表示中。
</body>
</html>

フレームの内容。

<!----cg_menu.html---->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<title>/////作画/////</title>
</head>
<body bgcolor="#FFFFFF" link="#FFFFFF" vlink="#C0C0C0" alink="#C0C0C0">
<table border="0">
<tr>
<td bgcolor="#DFDFDF">　</td>
<td align="center" width="100" bgcolor="#808080">
<font color="#FFFFFF"><strong>作画</strong></font>
</td>
<td bgcolor="#DFDFDF">　</td>
</tr>
</table>
<p>趣味にもならないＧＧ作画。<br>
現在のＣＧ枚数は２枚・・・・・・。<br>
かなり暇なら増えて行きます。<br>
まぁ無理でしょうけど・・・。</p>
<table border="0">
<tr>
<td bgcolor="#DFDFDF">　</td>
<td align="center" bgcolor="#808080"><a href="javascript:void(0);">
<img src="../cg/sample/sm_suzuki.jpg" border="0" width="100" height="80"
 onClick='top.changeImage("鈴木雅之","../cg/image/suzuki.jpg","タブレット購入記念。");'></a>
</td>
<td bgcolor="#DFDFDF">　</td>
</tr>
<tr>
<td bgcolor="#DFDFDF">　</td>
<td align="center" bgcolor="#808080"><a href="javascript:void(0);">
<img src="../cg/sample/sm_suzukisd3.jpg" border="0" width="75" height="100"
 onClick='top.changeImage("ＳＤ鈴木雅之","../cg/image/suzukisd3.jpg","やられる前に、ヤレ！");'></a>
</td>
<td bgcolor="#DFDFDF">　</td>
</tr>
</table>
<p>　</p>
<table border="0">
<tr>
<td bgcolor="#DFDFDF">　</td>
<td align="center" width="100" bgcolor="#808080"><a href="../sinsen_index.html" target="_top">
<font color="#FFFFFF"><strong>戻る</strong></font></a>
</td>
<td bgcolor="#DFDFDF">　</td>
</tr>
</table>
</body>
</html>

ここまで。

　

 　

　

　 戻る