![]() |
| |||||
|
マウスに画像を追従させるサンプルと機能マウスカーソルの右下に画像を置きます。「マウスカーソルに画像」を指定と違い、アイコン専用画像ではなく、GIF画像などでもOKです。→ Sample:マウスに画像を追従させる 画像はできるだけ小さいものを使いましょう。 アニメーションGIFなどを置くと効果的です。 サンプル・ソース緑の文字が変更箇所で、赤い文字が対応するソースです。"/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample:マウスに画像を追従させる
解説・注意点など複数の画像を追従させる場合はこちらを参考にして下さい。<BODY>タグ内に、以下の記述をすることで、画像を呼び出します。 <DIV id="ID" style="position:absolute"><IMG src="sample.gif"></DIV> document.all["ID"].style.left= event.x + 8 + document.body.scrollLeft; document.all["ID"].style.top = event.y + 16 + document.body.scrollTop; の+ 8と+ 16はマウスと文字の横方向、縦方向の距離です。 マウスに文字を近づけたり遠ざけたりしたい場合に調節してください。 ← Webデザインテクニックに戻る |
|
| |||||||||||||||||||||||||
|
Copyright(C) 2004. Aeu, Gundam, eWeb, Web Design Techniques. All rights reserved. - Home - |