マウスの後を追いかけてくる画像を表示します。
マウスの動きに合わせて、表示される場所は右側だったり左側だったりします。
画像は表示される位置によって、変わります。
サンプルは適当なものがないので、数の画像を使っています。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」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
my_pic=new Array();
//マスコットに使う画像を指定する
//右下用
my_pic[0]=new Image(); my_pic[0].src="0.gif";
//左下用
my_pic[1]=new Image(); my_pic[1].src="1.gif";
//右上用
my_pic[2]=new Image(); my_pic[2].src="2.gif";
//左上用
my_pic[3]=new Image(); my_pic[3].src="3.gif";
x_mae=0; y_mae=0; x_iti=0; y_iti=0; x_purasu=0; y_purasu=0;
kekka_pic=new Image();
function basyo_han(e)
{
if(document.layers){x_iti=e.pageX; y_iti=e.pageY;}
else if((document.getElementById) && (!document.all))
{x_iti=e.pageX; y_iti=e.pageY;}
else if(document.all)
{x_iti=document.body.scrollLeft+event.clientX;
y_iti=document.body.scrollTop+event.clientY;}
if(y_mae < y_iti && x_mae <= x_iti)
{x_purasu=-60; y_purasu=-50; kekka_pic.src=my_pic[3].src;}
else if(y_mae < y_iti && x_mae > x_iti)
{x_purasu=10; y_purasu=-60; kekka_pic.src=my_pic[2].src;}
else if(y_mae > y_iti && x_mae <= x_iti)
{x_purasu=-60; y_purasu=10; kekka_pic.src=my_pic[1].src;}
else
{x_purasu=10; y_purasu=10; kekka_pic.src=my_pic[0].src;}
hyouji();
}
function hyouji()
{
if(document.layers){
document.layers["lay0"].document.open();
document.layers["lay0"].document.write('<img src="'+kekka_pic.src+'">');
document.layers["lay0"].document.close();
document.layers["lay0"].moveTo(x_iti+x_purasu,y_iti+y_purasu);
document.layers["lay0"].visibility='show';
}
else if((document.getElementById) && (!document.all)){
document.images["pic1"].src=kekka_pic.src;
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){
document.images["pic1"].src=kekka_pic.src;
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=basyo_han;
//-->
</script>
</head>
<body>
<!-- 下記のimgタグにデフォルト時にマスコット画像で使いたい画像のURLを指定する -->
<span id="lay0" style="position:absolute;visibility:hidden;">
<img src="0.gif" name="pic1" border="0">
</span>
・
・
・
</body></html>
[ 解説 ]
まず表示させたい画像を4つ用意してください。（1つだけでもOK）
画像は何でも良いですが、あまり大きすぎるより小さめの方がいいです。
次に上のソースを丸ごとコピーペーストして下さい。
続いて、ソースの上から6〜9行目に画像を指定します。
6行目の「0.gif」に右下に表示させたい画像URLを、
7行目の「1.gif」に左下に表示させたい画像URLを、
8行目の「2.gif」に右上に表示させたい画像URLを、
9行目の「3.gif」に左上に表示させたい画像URLを、
それぞれ指定してください。
全て同じ画像を使用したい場合は、4つの欄に同じURLをご記入下さい。
最後に、ソースの下から7行目にイメージタグがあります。
ここに先ほど指定した画像と、同じ画像URLをご記入下さい。
（4つの画像を使用される方は、4つの内のどれでもOK）
|
