マウスストーカー

マウスカーソルに着いて来るように画像を表示します。 仕組みはJavaScriptでマウスカーソルが移動する度にイベントからその位置を 受け取り、画像の位置を移動させます。

スクリプトは次のようになります。ページが読み込まれた後に実行されますが、 特に問題無ければhead内に置くと良いでしょう。このスクリプトの画像URLの部分に マウスストーカーとして使用する画像を指定するだけで動作します。

<script type="text/javascript"><!--
// Mouse stalker.
// (C)2007 Amenti. http://amenti.usamimi.info/
// 2007/07/28 release.
// Terms of use: Keep to copyright. No claim. No support.

if (window.addEventListener) {
 window.addEventListener("load",create_m_stalker_img,false);
 window.addEventListener("mousemove",m_stalker_move,false);
}
else if (window.attachEvent && document.getElementById) {
 window.attachEvent("onload",create_m_stalker_img);
 document.attachEvent("onmousemove",m_stalker_move);
}

function create_m_stalker_img() {
 var stalker=document.createElement("img");
 stalker.src="画像URL";
 stalker.alt="";
 stalker.style.position="absolute";
 stalker.style.left="0";
 stalker.style.top="0";
 stalker.setAttribute("id","m_stalker");
 document.body.appendChild(stalker);
}

function m_stalker_move(evt) {
 var stalker=document.getElementById("m_stalker");
 if (!stalker) return;
 if (window.event) {
  if (!evt) var evt=window.event;
  if (!evt.pageX) evt.pageX=evt.clientX+document.body.scrollLeft;
  if (!evt.pageY) evt.pageY=evt.clientY+document.body.scrollTop;
 }
 stalker.style.left=evt.pageX+15+"px";
 stalker.style.top=evt.pageY+15+"px";
}
// --></script>

以下、スクリプトの動作について適当に解説します。

if (window.addEventListener) { // IE以外のブラウザ
 window.addEventListener("load",create_m_stalker_img,false);
 window.addEventListener("mousemove",m_stalker_move,false);
}
else if (window.attachEvent && document.getElementById) { // IE5以上
 window.attachEvent("onload",create_m_stalker_img);
 document.attachEvent("onmousemove",m_stalker_move);
}

window.addEventListenerが実装されているブラウザ(Firefox、Safari、Opera等)と IEで記述が異なるため条件分岐していますが、 この部分でページが読み込まれた後に create_m_stalker_img() を実行し、 マウス移動のイベントが発生したときに m_stalker_move() を実行するよう 組み込みイベントをセットしています。

function create_m_stalker_img() {
 var stalker=document.createElement("img"); // img要素を生成して変数stalkerにセット
 stalker.src="画像URL"; // src属性設定
 stalker.alt=""; // alt属性設定
  stalker.style.position="absolute"; // スタイル position:absolute
 stalker.style.left="0"; // スタイル left:0
 stalker.style.top="0"; // スタイル top:0
 stalker.setAttribute("id","m_stalker"); // id設定
 document.body.appendChild(stalker); // stalkerをbodyに追加
}

この部分はページが読み込まれた後に実行されます。document.createElement("img") でimg要素を生成して絶対配置させますのでスタイル規則を "position:absolute; left:0; top:0;" になるようにしています。 img要素には id を m_stalker と設定しておき、body要素の子要素として追加します。

因みに、このページで動作中のサンプルは画像の代わりにテキスト（顔文字）を マウスストーカーとして使用しています。 変更箇所は上のcreate_m_stalker_img() の青色で示した部分を 次のように書き換えしました。

 var stalker=document.createElement("pre");
 var text=document.createTextNode("（゜Д゜）");
 stalker.style.fontFamily="Verdana, ＭＳ Ｐゴシック, sans-serif";
 stalker.style.fontSize="12px";
 stalker.style.margin="0";
 stalker.appendChild(text);

※ spanやdivなどの要素だとブラウザ画面右端で改行されて顔文字が崩れるため pre要素の下にテキストノードを置いています。

function m_stalker_move(evt) {
 var stalker=document.getElementById("m_stalker"); // 変数stalkerにidがm_stalkerの要素をセット
 if (!stalker) return; // m_stalkerの要素が無ければリターン
 if (window.event) { // IE, Opera
  if (!evt) var evt=window.event;
  if (!evt.pageX) evt.pageX=evt.clientX+document.body.scrollLeft;
  if (!evt.pageY) evt.pageY=evt.clientY+document.body.scrollTop;
 }
 stalker.style.left=evt.pageX+15+"px"; // m_stalkerをカーソルに対し15px右に配置
 stalker.style.top=evt.pageY+15+"px"; // m_stalkerをカーソルに対し15px下に配置
}

マウスの移動が発生すると実行される部分です。 ローカル変数 stalker に id が m_stalker の要素（生成したimg要素）をセットし、 この要素の位置を移動させます。 evt.pageX、evt.pageYには、それぞれマウスのX座標、Y座標が格納されます。 IEはevt.pageX、evt.pageYではイベントが得られませんので window.event.clientX、window.event.clientY、 document.body.scrollLeft、document.body.scrollTop から算出した値を代入します。 if (window.event) { }の条件分岐はIEとOperaのみ通過しますが、 Operaはwindow.eventに頼らずともevt.pageX、evt.pageYの値を取得出来ますので、 この中の３つの条件分岐には反応しません。