..



 ■HomeJavaScriptサンプル集〔基本編〕−画像制御(マウスを重ねると画像が大きくなる)

JavaScript 無料のフリースクリプト集...
 画像が大きくなる
マウスを重ねると画像が大きくなる

 マウスカーソルを画像に合わせると画像が大きくなります。
 ※通信速度が遅いと画像の読み込みまでに時間がかかる場合があります。



 HPでの使用方法
<head>〜</head>タグ間の編集

 まずは<head>〜</head>タグ間に赤字のコードを挿入してください。

function imgSize(obj,w,h)
{
   obj.width=w;
   obj.height=h;
}
//--></script>

<img>タグの編集


 <img>タグに次の赤字の部分を挿入してください。詳しい説明は入門編に編集してあります。


<img src="最初に表示する画像のファイル" onMousemove="imgSize(this,拡大した時の幅[px],拡大した時の高さ[px])" onMouseout="imgSize(this,元の幅[px],元の高さ[px])">


サンプルのHTML

<head>
<title>マウスを重ねると画像が大きくなる</title>
<script language="JavaScript"><!--
function imgSize(obj,w,h)
{
   obj.width=w;
   obj.height=h;
}
//--></script>
</hrad>
<body>
<div align="center"><br><font color="#ff0000"><b><big><big><big>シーサーのホームページ </big></big></big></b></font><br>
<table cellpadding="0" cellspacing="0" border="0" width="550">
  <tbody>
    <tr>
<td height="255" align="center" width="25%">
<img src="si3_2.gif" onMousemove="imgSize(this,390,438)" onMouseout="imgSize(this,65,73)">
      <br>
</td><td valign="bottom" height="255" align="center" width="25%">
<img src="si0_2.gif" onMousemove="imgSize(this,100,157)" onMouseout="imgSize(this,83,131)">
      <br>
      </td>
      <td valign="bottom" height="255" align="center" width="25%">
<img src="si1_2.gif" onMousemove="imgSize(this,82,143)" onMouseout="imgSize(this,68,119)">
      <br>
      </td>
      <td valign="middle" height="255" align="center" width="25%">
<img src="si2_2.gif" onMousemove="imgSize(this,67,92)" onMouseout="imgSize(this,56,77)">
      <br>
      </td>
    </tr>
  </tbody>
</table>
<br><font color="#666666"><small>マウスカーソルを画像に重ねてください</small></font><br>
</div>
</body>
</html>

※上記のサンプルプログラムをコピー&ペーストで実行する場合は以下の画像ファイルを右クリックして「対象を保存」で同じフォルダ内に保存してください。

  si0_2.gif  si1_2.gif  si2_2.gif  si3_2.gif


一括ダウンロード書庫ファイル:sisa2.lzh
..


..


..