マウスの後を追いかけてくる画像を表示します。
追いかけてくる画像は、ポインタの右斜め下辺りに表示されます。
表示する位置は変更できます。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
//マスコットをマウスポインタからどの程度離すのか、横の距離を指定する
x_purasu=10;
//マスコットをマウスポインタからどの程度離すのか、縦の距離を指定する
y_purasu=10;
function hyouji(e){
if(document.layers){
x_iti=e.pageX; y_iti=e.pageY;
document.layers["lay0"].moveTo(x_iti+x_purasu,y_iti+y_purasu);
document.layers["lay0"].visibility='show';}
else if((document.getElementById) && (!document.all)){
x_iti=e.pageX; y_iti=e.pageY;
document.getElementById("lay0").style.left=x_iti+x_purasu;
document.getElementById("lay0").style.top=y_iti+y_purasu;
document.getElementById("lay0").style.visibility='visible';}
else if(document.all){
x_iti=document.body.scrollLeft+event.clientX;
y_iti=document.body.scrollTop+event.clientY;
document.all("lay0").style.pixelLeft=x_iti+x_purasu;
document.all("lay0").style.pixelTop=y_iti+y_purasu;
document.all("lay0").style.visibility='visible';}
x_mae=x_iti; y_mae=y_iti;
return false;}
if(document.layers)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=hyouji;
//-->
</script>
</head>
<body>
<!-- 下記のimgタグにマスコット画像で使いたい画像のURLを指定する -->
<span id="lay0" style="position:absolute;visibility:hidden;">
<img src="maru2.gif" border="0">
</span>
・
・
・
</body></html>
[ 解説 ]
まず表示させたい画像を用意してください。
画像は何でも良いですが、あまり大きすぎるより小さめの方がいいです。
次に上のソースを丸ごとコピーペーストして下さい。
ソースの下から7行目にイメージタグがあります。
ここに実際に使用したい画像URLをご記入下さい。
サンプルでは、ポインタを追いかけてくる画像はポインタの右斜め下にセットしています。
表示する位置を変更したい場合は、ソースの上から5行目と6行目にある各「10」の数値を変更して下さい。
5行目の数字が大きくなれば、より右の方へ、
6行目の数字が大きくなれば、より下の方へ
位置を変更できます。
|
