マウスポインタに貼りつく画像
原案：平井 公大 氏 （2000/11/01 登録）
マウスポインタにくっついて移動する画像です。レイヤ上の画像を非表示にしておいて、マウスがブラウザの上にきたときに初めて表示させます。あとは、マウスが移動するたびにマウスポインタの位置を検出し、その位置に画像を動かしています。小さい画像を使うとオリジナルのマウスポインタ風なことができます。（IE4.0、NN4.0以降）
表示サンプル
ソース記述内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>マウスポインタに貼りつく画像</title>
<script type="text/javascript">
<!--
var n = 10;
// NN4用イベントのキャプチャ
if ( document.layers ) {
document.captureEvents( Event.MOUSEOUT );
document.onMouseOut="document.icon.style.visibility='hide'";
document.captureEvents( Event.MOUSEMOVE );
document.onMouseMove=chN;
}
// NN4.0用
function chN(e) {
if ( document.layers ) {
document.layers['icon'].left = e.pageX + n;
document.layers['icon'].top = e.pageY + n;
document.layers['icon'].visibility = "show";
}
}
//IE5.0用
function ch(a,b) {
if( document.all ) {
var x = document.body.scrollLeft + event.clientX + n;
var y = document.body.scrollTop + event.clientY + n;
document.all(a).style.pixelLeft = x;
document.all(a).style.pixelTop = y;
document.all(a).style.visibility = b;
}
}
// -->
</script>
</head>
<body onMouseMove="ch('icon','visible')" onMouseOver="ch('icon','visible')"
onMouseout ="ch('icon','hidden' )" onScroll ="ch('icon','visible')">
<div style="text-align:center; height:70px">
<div id="icon" style="margin:0em; padding:0em; position:absolute; visibility:hidden;">
<img src="0.jpg" width="20" height="30" alt="0">
</div>
</div>
</body>
</html>
