JavaScriptで画像等の幅と高さを変更する方法を解説

HOME
更新日:2013.10.04
HOMEJavaScript入門 > 幅と高さ(DOM)

幅と高さ(DOM)

DOMを使って画像などの幅と高さを操作する方法について解説します。 画像を拡大縮小したり、グラフを作ったりする時に使うことができます。

画像を拡大縮小するスクリプト

では、マウスカーソルを乗せると画像が大きくなり、 カーソルが離れると小さくなるスクリプトを組んでみましょう。

480×360の画像(ファイル名gazo.jpgをimageフォルダに入れる)を用意して、 以下のスクリプトを記入してみてください。

<!-- 画像を縦横1/2サイズで表示 -->
<img id="img1" src="image/gazo.jpg" width="240" height="180" alt=""
 onmouseover="imgBig()" onmouseout="imgSmall()"><br>
 
<script>

//画像を大きくする関数(カーソルが乗った時)
function imgBig()
{
  document.getElementById("img1").style.width = "480px";
  document.getElementById("img1").style.height = "360px";
}

//画像を小さくする関数(カーソルが離れた時)
function imgSmall()
{
  document.getElementById("img1").style.width = "240px";
  document.getElementById("img1").style.height = "180px";
}

</script>

<サンプル>


スクリプトの解説

では、上記のスクリプトを見てみましょう。

画像タグ

画像タグにまずID名を付けます。今回は「img1」としています。 そしてマウスカーソルが乗った時(onmouseover)で、関数imgBig()を呼び出します。 マウスカーソルが離れた時(onmouseout)は、関数imgSmall()を呼び出すようにしています。

関数imgBig()

続いてJavaScript部分ですが、 関数imgBig()でID名「img1」が付いた画像の縦横幅を指定しています。 横を480px、縦を360pxに指定しています。 DOMを使って縦横幅を指定する方法は以下の通りです。

document.getElementById("id名").style.width
id名で指定された画像等の横幅を指定します
document.getElementById("id名").style.height
id名で指定された画像等の縦幅を指定します

関数imgSmall()

関数imgSmall()は関数imgBig()と同じ仕組みです。 縦横幅の指定値が違うだけです。 横を240px、縦を180pxに戻しています。

棒グラフにも利用できる

HTML上で棒グラフを作る時にも、DOMを利用できます。棒グラフを作るときは、 幅1pxの小さい画像を1つ用意します。 あとはこの画像のwidth属性値をいろいろ変えることで棒グラフが出来ます。

以下はサンプルです。得点を入力してボタンを押してみてください。

国語
数学
英語

国語 0点
数学 0点
英語 0点

上記サンプルのスクリプトです。 今回は100点以上やマイナスを記入された時の処置を入れていません。 各自でその時の処置を考えてみてください。

<form name="saiten">
国語<input type="text" value="">点<br>
数学<input type="text" value="">点<br>
英語<input type="text" value="">点<br>
<input type="button" value="グラフ表示" onclick="graph()">
</form>
<br>

<table border="2" style="width:100%">
<tr>
<td style="width:2em">国語</td>
<td>
<img src="image/bou.gif" id="kokugo" width="1" height="10" alt="">
<span id="ten0">0点</span>
</td>
</tr>
<tr>
<td>数学</td>
<td><img src="image/bou.gif" id="sugaku" width="1" height="10" alt="">
<span id="ten1">0点</span>
</td>
</tr>
<tr>
<td>英語</td>
<td><img src="image/bou.gif" id="eigo" width="1" height="10" alt="">
<span id="ten2">0点</span>
</td>
</tr>
</table>

<script>

function graph()
{
  //数値以外が入力された時のエラー回避
  try
  {
    //テキストボックスの文字を数値に変換
    var koku=parseInt(document.saiten.elements[0].value);
    var suu =parseInt(document.saiten.elements[1].value);
    var ei  =parseInt(document.saiten.elements[2].value);
    
    /* 国語のグラフ作成
        点数=pxにすると短いので、表幅に合わせて4倍にしました。
        点数の文字はinnerHTMLを使って書き出します。 */
    document.getElementById("kokugo").style.width = koku*4+"px";
    document.getElementById("ten0").innerHTML=koku+"点";
    
    //数学のグラフ作成
    document.getElementById("sugaku").style.width = suu*4+"px";
    document.getElementById("ten1").innerHTML=suu+"点";
    
    //英語のグラフ作成
    document.getElementById("eigo").style.width= ei*4+"px";
    document.getElementById("ten2").innerHTML=ei+"点";
  }
  catch(e)
  {
    alert("数値以外が記入されています!");
  }
}

</script>