◇<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
..
|
