画像が移動します

検索サイト 便利eelife Java Script
   検索サイト 便利eelife トップ : JavaScriptサンプル集トップ >> 画像の移動

画像が移動します。
      top,left
:200,700
:300,500
:400,300
:100,100

サンプルソースから書き方まで、JavaScriptに関する情報はこちら  All About [JavaScript]
スタイルシート、アクセス向上、レンタルサーバ…。HP作成に役立つ情報満載 All About [ホームページ作成]


サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY >
<BR>
<BR>
<BR>
<P><IMG src="rogo_java.gif" width="150" height="20" border="0" style="position : absolute;
top : 23px;
left : 15px;
" id="Lyid"></P>
<FORM name="myFORM">&nbsp; &nbsp; &nbsp; top,left<BR>
<INPUT type="radio" name="ra" onclick="chg()">:200,700<BR>
<INPUT type="radio" name="ra" onclick="chg()">:300,500<BR>
<INPUT type="radio" name="ra" onclick="chg()">:400,300<BR>
<INPUT type="radio" name="ra" onclick="chg()">:100,100</FORM>

</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
ck_suu=3;     //ラジオボタンの数です。0から数えます
function chg(){
v=0;
for (i=0; i<=ck_suu; i++){
if (document.myFORM.elements[i].checked){v = i;
}
}
if(v==0){act(200,700)};
if(v==1){act(300,500)};
if(v==2){act(400,300)};
if(v==3){act(100,100)};
}

function act(C_Top,C_Left){
document.all["Lyid"].style.top= C_Top;
document.all["Lyid"].style.left = C_Left;
}

// -->
</SCRIPT>
コメント
ラジオボタンの設置

document.myFORM.elements[i].checked : 何番目のラジオボタンが押されているか調べます。
C_Top : id名が"Lyid"の上からの位置 Y座標
C_Left : 左からの位置 X座標
act(200,700) でそれぞれの数値を取得して移動します。

サンプルソースから書き方まで、JavaScriptに関する情報はこちら  All About [JavaScript]

サイトマップ Copyright (C) eelife  All rights reserved リンクはご自由に