インターネット&PC120%活用:インターネット活用編




Internet Explorer でJavaScriptを使ってねこの画像を動かすテスト

1匹は自動でうごきます

3匹はマウスでクリックした場所に移動します








簡単な解説

IEで画像を指定した位置に動かすには
(1)まず画像のしていは<DIV>タグを使って次のように指定します
<DIV ID="cat0" STYLE="position:absolute;top:100;left:10"><img src="catwh.gif" width="16" height="13"> </DIV>

(2)マウスのクリックで画像を動かす関数(showcat)を呼ぶ。FormにonClickイベントを記述
<form name="q" onClick="showcat()" >

(3)関数showcat()では、document.all.DIVタグID.style.pixelTop(pixelLeft)=y.event(x.event)
 でマウスのクリック位置に、画像を移動する
y.event  x.event はイベントの生じた座標値を保持している。
関数showcat()は以下の通り
var n=0;
function showcat(){
document.q.T1.value="Y座標:"+event.y;
document.q.T2.value="X座標:"+event.x;
n++;
if (n>2) n=0;
if (n==0){
document.all.cat0.style.pixelTop=event.y;
document.all.cat0.style.pixelLeft=event.x;}
if (n==1){
document.all.cat1.style.pixelTop=event.y;
document.all.cat1.style.pixelLeft=event.x;}
if (n==2){
document.all.cat2.style.pixelTop=event.y;
document.all.cat2.style.pixelLeft=event.x;}
}

あとはソース見てください。もっといい方法があるかもしれません。
もっといい方法があれば、教えていただければ幸いです。

 

TopPage


inserted by FC2 system