m018
画像や文字をマウスカーソルに追従させる
Copyright(C) 2004 web工房 All Rights Reserved
action
画像や文字等のオブジェクトをマウスカーソルに追従して表示します。
※下記のラジオボタンで追従させるオブジェクトを選択して下さい。
web技
◆手順1【マウスカーソルに追従させるオブジェクトの設置】
※<div>〜</div>に、マスウカーソルに追従させるオブジェクトを記述します
※画像<img〜>/表<table>〜/テキスト文字等
※最初は空白の場合は※<div>〜</div>に何も記述しません
［例1：画像の場合]
-----次の行から(copy)-----
<div id="Obj_1" style="position:absolute;">
<img src="gif/a_crow.gif" width="50" height="50" alt="画像"></div>
-----上の行まで(copy)-----
［例2：文字の場合]
※短い文章(注意書き)等を書くこともできます
-----次の行から(copy)-----
<div id="Obj_1" style="position:absolute;color:#000000;">v(^^)v</div>
-----上の行まで(copy)-----
［例3：マウスカーソルの座標](最初は空にする)
※スクリプト上でデータを書き込むので、※<div>〜</div>には何も記述しません
-----次の行から(copy)-----
<div id="Obj_1" style="position:absolute;color:#ff0000;"></div>
-----上の行まで(copy)-----
◆手順2【スクリプトの実行】
※<body〜>に記述します(ファイルオープン時に起動するとき)
-----次の行から(copy)-----
<body onload="MouseXY()">
-----上の行まで(copy)-----
◆手順4【スクリプト】マウスに座標数値を追従させる
※event.x/event.yは、表示されているウィンドウ上のマウスカーソルの座標を取得します。
※ウィンドウがスクロールされるのに対応するには
X=document.body.scrollLeft + event.x;
Y=document.body.scrollTop + event.y;
のようにスクロール量 document.body.scrollLeft/document.body.scrollTop を加えておかなければなりません。
※カーソルからのオブジェクトの表示位置は、x-20/y-5 の数値を適当に変更して下さい
※例示の｢画像｣｢文字｣を追従する場合は下記のスクリプトです
-----次の行から(copy)-----
function MouseXY() {
X=document.body.scrollLeft+event.x;
Y=document.body.scrollTop+event.y;
document.all["Obj_1"].style.left=X+20;
document.all["Obj_1"].style.top=Y-5;
document.onmousemove=MouseXY;
}
-----上の行まで(copy)-----
※カーソル座標をマウスに追従させるためには、下記のスクリプトを使用します
※<div>〜</div>にinnerTexを用いて座標を書き込んでいます(上記とはこの部分のみ異なります)
-----次の行から(copy)-----
function MouseXY() {<br>
X=document.body.scrollLeft+event.x;
Y=document.body.scrollTop+event.y;
document.all["Obj_1"].style.left=X+20;
document.all["Obj_1"].style.top=Y-5;
document.all["Obj_1"].innerText="X=" + X + " , Y=" + Y;
document.onmousemove=MouseXY;
}
-----上の行まで(copy)-----
解説等
◆アニメgif等を追従させて面白い効果を出す(例1)他、常時、表示しておきたいデータ(例2・例3)を追従させるということもできます。
◆追従させるオブジェクトを <div>〜</div> に記述しているのは、設置するオブジェクトの種類が異なってもそのまま使用できることによるものです。オブジェクトのタグに直接style属性を設定することもできます。
◆例示では表示するオブジェクトをラジオボタンから、また画像はサムネイルから選択できるようにしているので、実際のスクリプトは｢web技｣での解説とは若干異なります。
【活用技】
◆マウスカーソルの座標を表示する技は
[技k014]マウスカーソルの位置を検出して座標表示する、を参照して下さい。
【お勧めサイト】
◆よそさまのサイトで恐縮ですが「マウスカーソル追いかけワンコ」(サイト名:AUTO LOGO)のスクリプトは面白いです。ワンちゃんやニャンコががマウスカーソルを追いかけますが、複数画像を用いて複雑な動きをします。私もときどき使わせて頂いております。私にはとてもこんなスクリプトを作る程の実力はありません。
keyword
◇scrollLeft◇scrollTop◇event.x
history
◇(2004.10.09)設置
注意
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----
