画像をクリックで拡大縮小
画像を左クリックすると拡大、右クリックすると縮小されます。
<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>