画像をクリックで拡大縮小

画像を左クリックすると拡大、右クリックすると縮小されます。
<html lang="ja">
<head>
<title></title>
<title>JavaScript画像をクリックで拡大縮小</title>
<script type="text/javascript">
<!--
var ini_x,ini_y;
var ral_x,ral_y;
var min,max,min_size,max_size;

// x/yが拡大率、逆数が縮小率
var x = 5;
var y = 4;
// 画像の初期位置
var ini_top  = 300;
var ini_left = 100;
// 最大、縮小倍率
var max = 2;
var min = 0.25;

function Ini(){
	ini_x = parseInt(document.all('key').style.width);
	ini_y = parseInt(document.all('key').style.height);
	max_size = ini_x * max;
	min_size = ini_x * min;
	document.all('key').style.top  = ini_top + "px";
	document.all('key').style.left = ini_left + "px";
}
function Cng(flg){
	if(ral_x > max_size || ral_x < min_size){
		alert('許容サイズを超えました。');
		ral_x = ini_x;
		ral_y = ini_y;
		document.all('key').style.width  = ini_x + "px";
		document.all('key').style.height = ini_y + "px";
		Ini();
	}else{
		var x_pos = event.x+document.body.scrollLeft;
		var y_pos = event.y+document.body.scrollTop;
		ral_x = parseInt(document.all('key').style.width);
		ral_y = parseInt(document.all('key').style.height);
		var rate;
		if(flg == 'b'){rate = x/y;}else{rate = y/x;}
		ral_x = ral_x * rate;
		ral_y = ral_y * rate;
		document.all('key').style.width  = ral_x + "px";
		document.all('key').style.height = ral_y + "px";
		x_pos = x_pos - (ral_x / 2);
		y_pos = y_pos - (ral_y / 2);
		document.all('key').style.left = x_pos + "px";
		document.all('key').style.top  = y_pos + "px";
	}
}
//-->
</script>
</head>
<body onLoad="Ini()">

<img src="1.gif" onClick="Cng('b')" 
  oncontextmenu="Cng('s');return false" id="key" class="key"
  style="width:108px;height:93px;top:0px;left:0px;position:absolute;" alt="">
<p>画像を左クリックすると拡大、右クリックすると縮小されます。</p>
</body>
</html>