表示ファイルの切換 (移動表示)
|
【 本ファイルの構造 】
- 背景＋移動部分画像
- 重複表示法：背景 <td>の bgground に背景図、移動図をこのセルに表示。
他の背景色は設定しない。 - ハードコピー時は、ブラウザ設定を「背景色印刷」にする
- JavaScript サンプル
<head>
<meta http-equiv="Content-Script-Type" content="text/JavaScript"> ……使用宣言
……
</head><script language="JavaScript"> …… Script 定義開始 <!-- ………… 以下ファイル切換 count=0; function 函数名() …… 函数定義 { count++ ; ………… ＋１ count%=21; ………… countを21で割った剰余
document.画像名.src= "./フォルダ/画像ファイル"+count+".gif" ; 切換画像名宣言 } 函数名＝changeImg() // --> 画像名＝train </script> フォルダ/画像フ ァイル ＝./_movbrk/sigbrk 等 …… (函数名、画像名、urlはアルファベット＋数字のみ許容)
<body onload="setInterval(' 函数名()',1000)"> ……函数動作時隔ms設定
……
<table cellspacing=0 cellpadding=0 border=0 width=100%>
<tr><td background="./フォルダ/背景画像ファイル" height=xxx vAlign="top">
<img src="./フォルダ/画像ファイル0.gif" name= "画像名" vAlign="top">……動画
</table>
- 動作サンプル０
背景の２枚目がＹ方向に３px表示され、その消去方法が判らない。
応急的には上側に３px分の空白を付けたファイルを用いる。td タグの background 表示特性の問題で、切換表示の問題とは違うから、ブラウザ毎に微妙な違いがあるかもしれない。
- 動作サンプル１
なぜＡＴＳ−Ｐ方式か！？ （ 画像ファイルの切換表示実験 ）補足
- 重複表示での位置ズレ(ＩＥ)は、下部に３px分の繰り返し表示を起こすためだから、上端合わせ方式で解消する。下端合わせ表示をオフセット方式で現物合わせすると、正しく表示するブラウザでズレを起こす。
- 可動部と固定部を並列密着表示できれば、その構造の方が単純で好ましい。
その場合、透過データでは背景色指定可能 - 移動絵の分割法は、廻り灯籠を想定して、表示幅Ｗを何分割で移動表示するかを定め、その幅を基準に１周期で絵幅Ｌと非表示部／重複部Ｎを割って切り上げて最低分割数を決める。
途中停止、減速、加速など速度を下げた分は分割数を増やす。 - 画像切換キーはファイル名中の数値で、これはカウンター値に対応して０〜（分割数Ｄ−１）を用いる。Ｅｘ．img0.拡張子、img1.gif、…、img3.gif、img10.gif、……、……、
- 高速化：転送情報量と処理量を減らす。見掛けのアクセス速度を上げる
- 分割数を少なく
- 動く絵を小さく
- ダイアルアップの低速回線では速度に追いつかない場合が多いので、画像データを事前に変数として読み込む必要がある。
- 複数の動画像表示可能。画像名を変えて定義する（クロックは共通）
［宣言］ 切換画像Ａ document.画像名Ａ .src= "./urlＡ/画像ファイルＡ"+count+".gif" ; 切換画像Ｂ ％は剰余、下線部はオフセット加算 document.画像名Ｂ .src= "./urlＢ/画像ファイルＢ"+(count＋OFS)%分割数+".gif" ; ［実表示部］ （name= と OFS値がキー） 切換画像Ａ <img src= "./urlＡ/画Ａ名0.gif" name= "画像名Ａ" vAlign="top">……動画Ａ 切換画像Ｂ、 OFS：進みオフセット値＝分割数の補数遅れ <img src= "./urlＢ/画Ｂ名OFS.gif" name= "画像名Ｂ" vAlign="top">……動画Ｂ - 画像のタイミングを進める方法は、カウント数にオフセットを加えて分割数の剰余を求める
- タイミングを遅らせるには、カウント数に補数を加算して分割数の剰余を求める
例：２０分割表示で３コマ遅らせる場合、２０の補数である１７（＝２０−３）を加えて剰余を求める - この方式では、通信回線の速度に制限されて駒落ちを起こす場合がある。その解決策は、動画像DATAをあらかじめ配列変数(メモリー)に読み込んで利用する方法である。サンプルを示す。
|
|
| |
| ： Last Update 04/11/26 (11/19，/10, |