浮遊感のあるマウス
◎今回の小技は、皆さんも良くご存知のマウスポインタに画像を付ける技術を紹介します、 良くあるスクリプトだとポインタを画像が追いかけると言った物ですが、 今回はぷにょん！ぷにょん！と言う感じの動きにしました。
◎設置までの手順
メルマガのタグをコピーしメモ帳にペーストする
↓
この動作を入れたいページをメモ帳かFrontPegeExpressで開く
↓
●メモ帳の場合
<!--↓ここから↓-->〜<!--↑ここまで↑-->を<HEAD>〜</HEAD>の間にペースト
します、このタグ（スクリプト）は変更しないで下さい。
<BODY>の属性として ONLOAD="x_img_Move();" と入力して下さい
そして、以下の<DIV>〜</DIV>のタグを<BODY>の一段落下にペーストして下さい
画像を変えたい時は、パスとサイズを各自記入すればOKです。
<DIV ID="Image"
STYLE="LEFT: 25px; POSITION: ABSOLUTE; TOP: 16px;VISIBILITY:visible;">
<IMG SRC="画像までのパス" width="画像の横幅" height="画像の縦幅"></DIV>
■FrontPageExpressの場合
<!--↓ここから↓-->〜<!--↑ここまで↑-->を別画面でペーストします
メニューバーの挿入(I)⇒スクリプト(T)を押せば、スクリプトを入力する
ウインドウが出てきますので、そちらへペーストします。
編集画面に『Ｊ』このようなマークが出て来ますが、これは消せませんので
配置の邪魔にならない所へ置いて置いて下さい。
その次は、メニューバーの表示(V)⇒HTML(H)でタグ画面を出し、最初の<BODY>の
中へ<BODY BGCOLOR=#ffffff ONLOAD="x_img_Move();"> この様に追加して
下さい、それでそのHTML画面をOKで閉じます。
最後に、メニューバーの挿入(I)⇒HTMLマークアップ(H)を押すとマークアップの
ウインドウが出て来ますので<DIV>〜</DIV>のタグをペーストします。
<DIV ID="Image"
STYLE="LEFT: 25px; POSITION: ABSOLUTE; TOP: 16px;VISIBILITY:visible;">
<IMG SRC="画像までのパス" width="画像の横幅" height="画像の縦幅"></DIV>
編集画面に<?>このようなマークが出て来ますが、これは消せませんので配置の
邪魔にならない所へ置いて置いて下さい、画像を変えたい場合は<?>のマーク
を1クリックし選択状態から右クリックを押せばHTMLマークアップのプロパティ
と言う項目がありますので、そちらから画像までのパスとサイズを設定して
下さい。
これでブラウザから確認して見て下さい、動作例と同じ動きなら完成です
若しランタイムエラーが発生しましたら、もう一度指定した場所にちゃんと
タグが間違いなく打たれている事を確認して下さい。
尚、この小技はIE専用です、ネスケでは動きません、その他は確認出来ません
****************************スクリプト＆タグ**************************
<HTML><HEAD><TITLE>浮遊感のあるマウス</TITLE>
<!--↓ここから↓-->
<script language="javascript">
<!--
var n_Mouse_X,n_Mouse_Y;
var n_x,n_y,nx,ny,nhx,nhy,_x=0,_y=0;
window.document.onmousemove=xMouse_Move;
function xMouse_Move(){
n_Mouse_X=document.body.scrollLeft+event.x;
n_Mouse_Y=document.body.scrollTop+event.y;
}
function x_img_Move(){
for(k=1;k<12;k++){
if(n_Mouse_X>0){
nx=n_Mouse_X-_x;
ny=n_Mouse_Y-_y;
nhx=nx/2;
nhy=ny/2;
n_x=(nx+nhx)*0.65;
n_y=(ny+nhy)*0.65;
_x=Math.floor(n_Mouse_X+n_x);
_y=Math.floor(n_Mouse_Y+n_y);
document.all.Image.style.pixelLeft=_x+10;
document.all.Image.style.pixelTop=_y-8;
}
}
timer=setTimeout("x_img_Move()",100);
}
-->
</script>
<!--↑ここまで↑-->
</HEAD>
<BODY BGCOLOR=#ffffff ONLOAD="x_img_Move();">
<DIV ID="Image"
STYLE="LEFT: 25px; POSITION: ABSOLUTE; TOP: 16px;VISIBILITY:visible;">
<IMG SRC="yaji1.gif" width="25" height="16"></DIV>
</BODY></HTML>
