ここから本文です
ショコラのタグ講座
一緒に勉強しましょう

書庫ブログ作成

すべて表示

どうも、ショコラです。
今回は『マウスストーカー』の設置についてです。
『マウスストーカー』とは、マウスのカーソルに付いてくるアレですw
ブログやHPで観られた事がある方も多いはずです。
ちなみにサンプルとして、私のブログ『ドラゴンボールファンミーティング』を
ご覧下さい。此処では、カーソルに瞬間移動する悟空が付いてきます。


マウスストーカーの設置については、Javascriptを使用します。
次のコードを使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>マウスストーカー1画像</title>
</head>
<body>

<!--★ここからコピー-->
<script type="text/javascript">
<!--
/*============================================================
画像1個マウスストーカー 参考サイト : http://www5e.biglobe.ne.jp/~purest/javascript/index.html
=============================================================*/
var mga="画像のアドレス"; //★画像指定
document.onmousemove=function (e){
     Mo.style.left=e.pageX+15+"px"; //★数値はマウスと画像の横位置。お好みで
     Mo.style.top=e.pageY+15+"px";  //★数値はマウスと画像の縦位置。お好みで
}
document.write("<img src='"+mga+"' id='Mo' style='position:absolute;'>");
//-->
</script>
<!--★ここまでコピー-->

</body>
</html>

この上のコード、<!DOCTYPE html>から</html>まで全文をコピーします。

変更箇所は、var mga="画像のアドレス"; //★画像指定 の箇所です。
此処の"画像のアドレス"; の部分に使いたい画像のアドレスを記述します。
ちなみに、こんな風に。

var mga="http://blog-imgs-82.fc2.com/m/a/r/marchan222/dora1078.gif"; //★画像指定 です。

またマウスと画像の位置を変更したい場合は、下の15と書いてある数字を
変える事で変更出来ます。
ですが、画像のアドレスを替えただけで、十分機能しますよ♪
さて、このコードを貼り付ける場所は、HTML編集画面の<body>から</body>の
間に記述します。
わからない場合は、HTML編集画面を一番下までスクロールして</body>の
直前に貼り付けると良いでしょう。
FC2ブログなら、管理画面のテンプレートの設定⇒HTML編集画面に貼り付けます。

マウスストーカーの元となる画像ですが、アニメーションGIF画像を使うと、
より面白いです。
私のオススメのGIF画像サイトは、コチラ♪


こちらには、いろんなGIF画像があります。
食べ物や料理、スポーツに乗り物、ゲームやアニメのキャラクターもあります。
ラーメンGIF画像には、こんなのもありますよ♪

イメージ 1

なんと、ラーメンから湯気が立って、ナルトが踊っていますw

ラーメンブログを持っている方は、この画像でマウスストーカーを作ると
良いですね♪

以上、マウスストーカーの設置でした。













書庫その他の最新記事

すべて表示

  • 背景変更!!の続き

    2014/12/23(火) 午前 0:08

    先程下に書いたタグで音楽がなるかを確かめます。 曲は桑田佳祐の『白い恋人たち』です。 今回はイコライザー表示無しの自動再生ですので 暫くすると、音楽が流れます。 それだけでは、つまらないので何か冬の画像でも載せておきま ...すべて表示すべて表示

  • 背景変更!!

    2014/12/22(月) 午後 11:53

    今、背景をアニメーションGIFを使ったニャンコの足跡から、LV(ルイヴィトン) モノグラムバージョンに変えました。 なんかこっちの方が落ち着くね。 前のも良かったけど、ちょっとガチャガチャしてたもんね。 どうです??良いでし ...すべて表示すべて表示

  • ササクレ音頭

    2014/12/21(日) 午前 1:41

本文はここまでですこのページの先頭へ
みんなの更新記事