画像を徐々に表示する

グラフを徐々に表示する

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
var img, max, count = 0;
var widthList = new Array();
function getGraph() {
	img = document.images;
	var tmp = new Array();
	for (var i = 0; i < img.length; i++) {
		// 全ての画像の横幅を配列に格納
		tmp[i] = widthList[i] = img.item(i).width;
	}
	max = tmp.sort(function(a, b) { return(b - a); })[0];

	(widthList) && graph();
}		
function graph() {
	for (var i = 0; i < widthList.length; i++) {
		img.item(i).width = count;

		if (count >= widthList[i]) {
			img.item(i).width = widthList[i];
			img.item(i).title = widthList[i] + "px";
		}
	}

	if (count < max) setTimeout("graph();", 50);		// 画像を表示する速さ
	count += 10;						// 画像の増加量 (px)
}
// -->
</script>
</head>
<body onload="getGraph();">
<table>
<tr>
<td><img src="./graph.gif" width="500" height="5" border="0" alt="graph"></td>
</tr>
<tr>
<td><img src="./graph.gif" width="300" height="5" border="0" alt="graph"></td>
</tr>
<tr>
<td><img src="./graph.gif" width="150" height="5" border="0" alt="graph"></td>
</tr>
<tr>
<td><img src="./graph.gif" width="400" height="5" border="0" alt="graph"></td>
</tr>
<tr>
<td><img src="./graph.gif" width="275" height="5" border="0" alt="graph"></td>
</tr>
</table>
</body>
</html>

徐々に動くグラフを画像用にしてみたものです。適度の大きさのグラフ用の画像を1つ用意します。ここでは、

を使用しています。

もし、画像の値を「px」ではなくて「%」で指定した時は、テーブル等を用いてテーブル全体の値をピクセルで指定しておけば、そのテーブルの横幅に対するパーセンテージが得られますので、この値が全体の終了条件になります。ただし、実際にはテーブルの枠の関係で本来の値よりも少し少ない値で表示されます。

たとえば <table width="500"> として、とある画像の横幅が 50% の場合にはその画像は 250px になりますが、実際は 250px より少なくなります。グラフ表示[%] これは、border と cellpadding と cellspacing の値を 0 にすれば回避できます。グラフ表示[%]

縦に表示するには

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
var img, max, count = 0;
var heightList = new Array();
function getGraph() {
	img = document.images;
	var tmp = new Array();
	for (var i = 0; i < img.length; i++) {
		tmp[i] = heightList[i] = img.item(i).height;
	}
	max = tmp.sort(function(a, b) { return(b - a); })[0];

	(heightList) && graph();
}
function graph() {
	for (var i = 0; i < heightList.length; i++) {
		img.item(i).height = count;

		if (count >= heightList[i]) {
			img.item(i).height = heightList[i];
			img.item(i).title = heightList[i] + "px";
		}
	}

	if (count < max) setTimeout("graph();", 50);
	count += 10;
}
// -->
</script>
</head>
<body onload="getGraph();">
<table height="310"><!-- 気持ち大きめに指定して固定 -->
<tr>
<td valign="bottom"><img src="./graph.gif" width="5" height="200" border="0" alt="graph"></td>
<td valign="bottom"><img src="./graph.gif" width="5" height="250" border="0" alt="graph"></td>
<td valign="bottom"><img src="./graph.gif" width="5" height="150" border="0" alt="graph"></td>
<td valign="bottom"><img src="./graph.gif" width="5" height="100" border="0" alt="graph"></td>
<td valign="bottom"><img src="./graph.gif" width="5" height="300" border="0" alt="graph"></td>
</tr>
</table>
</body>
</html>

このように width を height に書き換えただけです。この場合、テーブル等で画像の表示部に対して高さを指定しておかないと表示される時に動いてしまいます。