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タグを除去してます。

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



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

追尾する文字を画像やアイコンに変えてもよいかもしれません。