便利eelife Java Script

   戻る

画像がズームアップします。

Color Room

スタート




サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY onload='Preload("colorbook.gif")'>
<P><IMG src="dummy.gif" name="myIMG" style="position:absolute;
top : 1px;
left : 1px;" width="300" height="300" border="0" alt="Color Room" onclick="Default()"></P>
<P><A href="javascript:move_img()" title="画像をクリックすると元に戻ります">スタート</A></P>
</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
i=0;
function Preload(n){
document.images["myIMG"].src =n;
myObj = document.images["myIMG"];
format();
}

function format(){
img_Top=300;  
img_Left=300; 
myObj.style.top = img_Top; //画像を表示する上から位置(垂直座標)
myObj.style.left = img_Left; //画像を表示する左から位置(画像の水平座標)
myObj.width = 0; //画像の幅
myObj.height = 0; //画像の高さ
}

function move_img(){
img_Top=img_Top-0.5;  
img_Left=img_Left-0.5;
myObj.width = i; //画像の幅
myObj.height = i; //画像の高さ
myObj.style.top = img_Top; //画像を表示する上から位置(垂直座標)
myObj.style.left = img_Left; //画像を表示する左から位置(画像の水平座標)
i++;
//window.status = i;
tmrID = setTimeout("move_img()",20);
}

function Default(){//元に戻す
window.clearTimeout(tmrID); // tmrID を止めます。
tmrID = null;
i=0;
format();
}

// -->
</SCRIPT>
コメント