onmousemoveでマウスカーソルに文字を追尾させる方法

JavaScriptのdocument.onmousemoveを使用して、ブラウザ上でマウスカーソルに文字を追尾させてみます。

1.CSSの記述例

<style type="text/css">
<!--
#idTrac{
	position:absolute;
}
-->
</style>

2.JavaScriptの記述例

<script type="text/javascript">
<!--
function mousetrac() {
  X = event.x + document.body.scrollLeft;
  Y = event.y + document.body.scrollTop;
  document.all["idTrac"].innerText = "マウスカーソルに\n追尾してます。";
  document.all["idTrac"].style.left= X + 5;
  document.all["idTrac"].style.top = Y + 10;
}
document.onmousemove = mousetrac;
-->
</script>

3.HTMLの記述例

DOCTYPEタグの記述があるとChromeブラウザで動作しませんでしたので、DOCTYPEタグは記述してません。


<div id="idTrac"></div>


マウスカーソルに文字を追尾させるデモページ

追尾する文字を画像に変えると良い様な気がします。