..

JavaScriptの入門とサンプル集
■JavaScript入門−画像・テキスト編−画像のサイズを変更する　　　　　■戻る　　　　　■次へ　　　　　■Home
■画像のサイズを変更する

　続いて画像のサイズを変更してみましょう。画像のサイズを変更するには、「width」（横幅）と「height」（縦幅）プロパティを操作します。HTMLの場合は次のようになります。
★JavaScriptで画像のサイズを制御する方法

　　　　　　document.画像オブジェクト.width（縦幅の場合は「height」）

　画像オブジェクトの部分は、<img>タグの「name」属性で指定した画像の名前の他、下記のような方法で指定することができます。
　　　images[参照番号]（ページ先頭からの画像数で０からの通し番号）
　　　images["画像名"]

　それでは、これらを用いて画像のサイズを変更するプログラムを見てみましょう。
　　　　　　

<html>
<head>
<title>画像のサイズを変更する</title>

<script language="JavaScript"><!--
function imagePop(imageName)
{
   document.images[imageName].width=84;
   document.images[imageName].height=62;
}
function imageDown(imageName)
{
   document.images[imageName].width=64;
   document.images[imageName].height=48;
}
// --></script>

</head>

<body>

<img src="sample10_1.jpg" width=64 height=48 name="pic1" onMouseover="imagePop('pic1')" onMouseout="imageDown('pic1')">
<br><br>
<img src="sample10_2.jpg" width=64 height=48 name="pic2" onMouseover="imagePop('pic2')" onMouseout="imageDown('pic2')">
<br><br>
<img src="sample10_3.jpg" width=64 height=48 name="pic3" onMouseover="imagePop('pic3')" onMouseout="imageDown('pic3')">

</body>
</html>

 〜sample12.html〜のリスト





画像のサイズを大きくする関数「imagePop()」

引数から引き渡されたイメージネームのサイズを84*62に
設定する処理をします。

画像を元の大きさにする関数「imageDown()」

引数から引き渡されたイメージネームのサイズを64*48に
戻す設定をする処理をします。







初期サイズを64*48、名前を「pic1」と設定
マウスが重なれば関数「imagePop()」を呼び出す
マウスが放れれば関数「imageDpwn()」を呼び出す
引数はイメージの名前
ご自身のＰＣで入力される場合は以下の画像ファイルを右クリックでHTMLファイルと同一フォルダの中に保存してください

sample10_1.jpg
sample10_2.jpg
sample10_3.jpg

【参照】イベント
【参照】プロパティ
【参照】関数

　　　■sample12.html実行する

sample12.htmlの実行画面



■補足　『画像のずれを無くす方法』

　サンプルプログラムを実行すると図のように、拡大した画像より下の画像がずれてしまうことに気づきましたか？


　HTMLはワープロの文章のように座標を持たないので、次章で紹介するスタイルシートで画像の座標を設定してやれば、この現象を無くすことができます。次のサンプルプログラムはスタイルシートで座標を設定した場合の例です。

・
・
・
<body>
<img src="sample10_1.jpg" width=64 height=48 name="pic1"  onMouseover="imagePop('pic1')" onMouseout="imageDown('pic1')" style="position:absolute;left:2px;top:8px;">
<img src="sample10_2.jpg" width=64 height=48 name="pic2" onMouseover="imagePop('pic2')" onMouseout="imageDown('pic2')" style="position:absolute;left:8px;top:80px;">
<img src="sample10_3.jpg" width=64 height=48 name="pic3" onMouseover="imagePop('pic3')" onMouseout="imageDown('pic3')" style="position:absolute;left:8px;top:152px;">
</body>
</html>

 〜sample12_2.htmlのリスト〜



sample12.htmlの<body>タグ間に赤字のスタイルシートを追記します。


スタイルシートについては次章を参照してください。

　　　■sample12_2.htmlを実行する


..
■JavaScript入門−画像・テキスト編−画像のサイズを変更する　　　　　■戻る　　　　　■次へ　　　　　■Home

..