キャラクタをマウスに合わせて動かす


■動作ブラウザ　【 IE:4.0　 NN:-】
Internet Explorer Netscape Navigator Opera iCab Safari
3.0 4.0 4.5 5.0 5.5 6.0 2.0 3.0 4.0x 4.x 6.0 7.0 6 7 2.x 1.0
Windows × ○ - ○ ○ ○ × × × × × × × × - -
Macintosh × ○ ○ ○ - - × × × × × × × - × ×
UNIX - - - - - - × × × × × × - - - -

ポイント x = event.x;
y = event.y;
if (x < 100) x = 100;
if (x > 200) x = 200;
if (y < 150) y = 150;
if (y > 180) y = 180;
説　　明 キャラクタをマウスに合わせて一定のXY座標内で動かすには、マウスのXY座標を取得しif命令を使って範囲内かどうか調べます。範囲外の場合には、範囲に収まるように値を調整しXY座標をキャラクタのXY座標に代入します。Internet Explorer 4以降の場合はevent.x,event.yにマウスのXY座標が入っています。また、このプロパティで取得できない場合にはclientX,clientYプロパティで座標を取得します。キャラクタはスタイルシートで絶対座標系を指定してください。指定しないと移動しない場合があります。
サンプル <html>
<head>
<title>キャラクタをマウスに合わせて一定XY座標内で動かす </title>
<script Language="JavaScript"><!--
function moveChar()
{
x = event.x;
y = event.y;
if (x < 100) x = 100;
if (x > 200) x = 200;
if (y < 150) y = 150;
if (y > 180) y = 180;
document.images["myChar"].style.left = x;
document.images["myChar"].style.top = y;
}
// --></script>
</head>
<body onMousemove="moveChar()">
<img src="char.gif" name="myChar" style="position:absolute;left:100px;top:100px;">
<br>
キャラクタはX座標100〜200、Y座標150〜180の範囲のみ移動できます。
</body>
</html>
補足説明 なし

■サンプルスクリプトを実行する　>>実行
 ■各ブラウザでの動作結果を見る　>>View!
写真素材 PIXTA