描画を切り替える

PRG JavaScript

　３つの画像を切り替えながら表示したくて、しかも表示している画像別にテキストを変えたいなどの要望があるとする。しかもHTTPリクエストを起こさずにDHTML でやりたいとする。

　今までは画像のURL を差し替えて、テキストを書き換えて、表示してる画像のIDを保持してアクションを動的に変更するようなスクリプトを組んでいたが、実装がかなりの手間。しかもページをCGI で動的に出力している場合は、JavaScript も動的に出力しないといけなかったりして見通しが悪いし、実際のHTMLがどうなるかが想像しにくい。

　そこで、色々と書かれた紙の上に同じサイズの紙を重ねるようにして、一連のオブジェクトをまとめて切り替えられるような仕組みにできないか考えてみた。


どう実装するか

　リクエスト直後に最初に表示する「紙１」はそのまま配置する。

　載せかえる「紙２」と「紙３」は「紙１」とまったく同じ位置に配置して見えないようにしておく。

　２のボタンが押されたら「紙２」を表示する。「紙１」は「紙２」に隠れて見えなくなる。

　３のボタンが押されたら「紙３」を表示して「紙２」を隠す。「紙１」は相変わらず隠れて見えない。

　１のボタンが押されたら「紙３」を隠す。隠れていた「紙１」が見えるようになる。

利点

  • 切り替えるたびに描画を生成するわけではなく、HTMLをあらかじめ用意しておける
  • 切り替えが高速
  • ソースの見通しが良い
  • JavaScript が簡潔
  • 画像の大きさを変えたり文字色を変えたりと「紙」ごとにデザインするのが容易

欠点

  • 「紙」の数だけHTMLを記述しておかなければならない
  • ダウンロードサイズが大きくなる
  • absolute の解釈が不安
  • 「紙」の大きさは揃えておかなければいけない

HTML 例

http://kingyo.sppd.ne.jp/sample/javascript/changeSheet.html

<html>
	<head>
		<title>Change Sheet</title>
		<style>
			div { background-color: white; }
		</style>
		<script type="text/javascript">
			function getObject(id) {
				if (document.getElementById) {
					return document.getElementById(id);
				} else {
					return document.all[id];
				}
			}
			function showSheet(id) {
				getObject(id).style.visibility = 'visible';
			}
			function hideSheet(id) {
				getObject(id).style.visibility = 'hidden';
			}
			function changeSheet(from, to) {
				if (to) showSheet(to);
				if (from) hideSheet(from);
			}
		</script>
	</head>
	<body>
		<div style="position: relative">
			<div id="sheet1" style="color: black">
				画像１
				<p>1 <a href="javascript: showSheet('sheet2')">2</a> <a href="javascript: showSheet('sheet3')">3</a></p>
				<input type="button" value="alert" onClick="alert(1)">
			</div>
			<div id="sheet2" style="position: absolute; top: 0px; left: 0px; visibility: hidden; color: red">
				画像２
				<p><a href="javascript: hideSheet('sheet2')">1</a> 2 <a href="javascript: changeSheet('sheet2', 'sheet3')">3</a></p>
				<input type="button" value="alert" onClick="alert(2)">
			</div>
			<div id="sheet3" style="position: absolute; top: 0px; left: 0px; visibility: hidden; color: blue">
				画像３
				<p><a href="javascript: hideSheet('sheet3')">1</a> <a href="javascript: changeSheet('sheet3', 'sheet2')">2</a> 3</p>
				<input type="button" value="alert" onClick="alert(3)">
			</div>
		</div>
	</body>
</html>
注意点
  • 「紙２」から「紙３」、「紙３」から「紙２」など載せかえる「紙」を変えるときは、新しい「紙」を表示してから前の「紙」を隠すようにしないと、一瞬「紙１」が見えてしまう。