サンプルソース
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE
type="text/css">
<!--
#Layer1{
position : absolute;
top : 100px;
left : 300px;
}
-->
</STYLE>
<SCRIPT
language="JavaScript">
<!--
var
W=300; //拡大した画像の幅
H=W; //拡大した画像の高さ
timer=1; //ズームアップの速さ
zoom_W=0; //ズームアップの初期値
zoom_H=0;
flag=0; // 0なら元の画像、1ならズームアップ画像
intvl=2; //拡大する数値 1なら1px、2なら2px、ずつ拡大
//ズームアップ
function resize(Name) {
if(flag==1){
closeImage(Name);return;}
IMG_W = document.images[Name].width; //元の画像の幅 取得
IMG_H = document.images[Name].height; //元の画像の高さ 取得
resizeImage(Name);
}
//ズームアップの繰り返し
function resizeImage(Name)
{
zoom_W += intvl;
zoom_H += intvl;
document.images[Name].width = IMG_W+zoom_W; //幅
document.images[Name].height =IMG_H+zoom_H; //高さ
if(IMG_H+zoom_H>= H){document.images[Name].title ="元にもどします。";flag =
1;return;}
setTimeout("resizeImage('"+Name+"')",timer);
}
//元の画像にもどします
function
closeImage(Name) {
document.images[Name].width = IMG_W; //元の画像の幅に戻します
document.images[Name].height = IMG_H; //元の画像の高さに戻します
document.images[Name].title
="ズームアップします";
flag=0;
zoom_W=0;
zoom_H=0;
}
//
-->
</script>
</HEAD>
<body>
<DIV id="Layer1"><IMG src="＊＊＊＊＊＊" width="80" height="80" border="0"
id="gazou" name="gazou" alt="ズームアップします"
onclick="resize('gazou')"></DIV>
</body></HTML>
ひとこと、二言
<IMG src="＊＊＊＊＊＊"の＊＊＊＊＊＊の 所は御自分の画像のURLをいれてください。
立て：横 同じ大きさの画像をいれてください。