幅と高さ（DOM）JavaScript入門

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

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

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>