HOME > ホームページ作成で使えるタグ > マウスに画像が付いて来る | |||||||||||||||
マウスに画像が付いて来る |
|||||||||||||||
マウスに連なった画像が付いて来ます。 | |||||||||||||||
画像を変えるといろいろな形に変更できます。 | |||||||||||||||
マウスストーカーと呼ばれるもので、検索すればたくさん出てきます。 | |||||||||||||||
ここではマウスストーカーでも実際にホームページ作成で使えそうなものを紹介します。 | |||||||||||||||
注意点 | |||||||||||||||
スタイルシートを使う場合、コンテンツ部分に色や背景を付けるとうまく動作しない場合があります。 | |||||||||||||||
マウスカーソルに画像が付いて来るサンプル |
|||||||||||||||
設置方法 | |||||||||||||||
Javascriptについて | |||||||||||||||
こちらより img.js ファイルをダウンロードして下さい。 | |||||||||||||||
js という名前のフォルダを作成し、ダウンロードしたJavascriptを保存して下さい。 | |||||||||||||||
画像の数を増やす場合は、スクリプトを書き足して下さい。 | |||||||||||||||
<body>を下記へ変更して下さい。 | |||||||||||||||
<body onload="ImageMove();"> | |||||||||||||||
HTML記述例 | |||||||||||||||
<head>と</head>の間に下記を記述して下さい。 | |||||||||||||||
JavascriptをHTMLに読み込ませます。 | |||||||||||||||
<script src="js/img.js" type="text/javascript"></script> | |||||||||||||||
HTML記述例 | |||||||||||||||
<head>と</head>の間に下記を記述して下さい。 | |||||||||||||||
画像を増やす場合は、こちらも書き足して下さい。 | |||||||||||||||
<img id="img0" src="1.gif" style="position:absolute; left:-30px; top:-30px;"> <img id="img1" src="2.gif" style="position:absolute; left:-30px; top:-30px;"> <img id="img2" src="3.gif" style="position:absolute; left:-30px; top:-30px;"> <img id="img3" src="4.gif" style="position:absolute; left:-30px; top:-30px;"> <img id="img4" src="5.gif" style="position:absolute; left:-30px; top:-30px;"> <img id="img5" src="6.gif" style="position:absolute; left:-30px; top:-30px;"> <img id="img6" src="7.gif" style="position:absolute; left:-30px; top:-30px;"> |
|||||||||||||||
|
|||||||||||||||
|
|||||||||||||||