初心者による初心者のためのJavaScript講座Ⅳ|ゼロからのWeb制作 Vol.19

ペンギン,ジャバジャバ

ペンギン,ジャバジャバ

こんにちは、鈴木です。

今回は、画像の大きさを変える「拡大」「縮小」ボタンをJavaScriptを用いて作りたいと思います。

目次

  1. 今回のプログラムコード
  2. プログラム解説

1.今回のプログラムコード

今回書くプログラムは前回の内容を使って、追加する部分だけを書いていきます。

<html>
<head>
<title>拡大縮小ボタン</title>
<script type ="text/javascript">
<!--
var nowsc=1.0;
function setScale(sc){
if( sc > 4 ) sc = 4;
if( sc < 0.2 ) sc = 0.2;
document.myImage.width = sc*320;
document.myImage.height = sc*240;
nowsc=sc;
}
//-->
</script>
</head>
<body>
<form>
<input type="button" value="拡大" onClick="setScale(nowsc*1.1);">
<input type="button" value="縮小" onClick="setScale(nowsc*0.9);">
</form>
</body>
</html>

こちらが今回追加するコードです。

2.プログラム解説

まず新たに画像を拡大、縮小させるためにsetScaleという関数を追加します。

そして、この関数に使う変数を新たに追加します。

var nowsc=1.0;

この変数は現在の画像の倍率を表します。

function setScale(sc){
if( sc > 4 ) sc = 4;
if( sc < 0.2 ) sc = 0.2;
}

次に新しい関数を定義します。

前回と同様に、条件文であるif命令を使います。

引数scを使い、条件を立てます。

もし、倍率が4を超えたら倍率は4のままである。

もし、倍率が0.2より下だったら倍率は0.2のままである。

この条件を設定しないとボタンを押し続けることでいつまでも「拡大」「縮小」を繰り返してしまうので、ここまでいったらか「拡大」「縮小」を止めるという条件を立てます。

document.myImage.width = sc*320;
document.myImage.height = sc*240;
nowsc=sc;

そして、myImageと名前を付けた画像のwidthとheghtを変えた時に画像を表示させるためにdocumentで定義します。

現在の画像の大きさを240×320と始めに決め(デフォルトの画像の大きさは適当で構いません)、倍率をかけていく式を作ります。

これで、setScaleというプログラムが出来ました。

<form>
<input type="button" value="拡大" onClick="setScale(nowsc*1.1);">
<input type="button" value="縮小" onClick="setScale(nowsc*0.9);">
</form>

前回と同様にinputタグを使って、「拡大」「縮小」のボタンを作ります。

onClickでsetScaleというプログラムが始まり、現在の倍率であるnowscに拡大で1.1ずつかけていき、縮小で0.9ずつかけていきます。

そして、先程決めた倍率の限界までいったら、そこで止まります。

これで今回のプログラムの解説は以上になります。

ブラウザに表示するとこちらのようになります。
資料
これで、「拡大」「縮小」を押せば、画像の大きさが変わるはずです。

次回も簡単なプログラムを紹介していきます。