便利eelife Java Script

   戻る

ドラッグすると画像が伸縮します。

Color Room

元の大きさに戻す




サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY onload='Preload("../rogoclr.gif")'>
<P><IMG src="" name="myIMG" style="position:absolute;
top : 1px;
left : 1px;
" onmousedown="move_In()" width="150" height="20" border="0" alt="Color Room"></P>
<P><A href="javascript:Default()">元の大きさに戻す</A></P>

</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
flag = false;
document.onmousemove = move_img; //マウスが移動した時のイベントハンドラ move_img を実行。
document.onmouseup = move_Out; //マウスのボタンを離したとき

function Preload(n){
document.images["myIMG"].src =n;
myObj = document.images["myIMG"];
img_Top=40;  
img_Left=40; 
myObj.style.top = img_Top; //画像を表示する上から位置(垂直座標)
myObj.style.left = img_Left; //画像を表示する左から位置(画像の水平座標)
Width = myObj.width;
Height = myObj.height;
}
function move_In(){
flag = true;
}

function move_Out(){
flag = false;
}

function move_img(){
if (flag==false) return;
img_W=event.x;  
img_H=event.y;  
myObj.width = img_W-img_Left; //画像の幅
myObj.height = img_H-img_Top; //画像の高さ
return false;
}

function Default(){//元の大きさに戻す
myObj.width =Width;
myObj.height=Height;
}

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