Home > イヌでもわかるJavaScript講座 お品書き
イヌでもわかるJavaScript講座 お品書き へ戻ります
イヌでもわかるJavaScript講座


Step.92 - マウスカーソルについてくる画像


マウスカーソルに飾りとして、なにかを連れまわします。


Step テーマ
● とくになし

実行例


マウスカーソルに何か、ついてくる?



リスト


<DIV id="cursor" style="position:absolute"><IMG src="../image/link1.gif" width="88" height="31"></DIV>
<script type="text/javascript"><!--
window.document.onmousemove = myGetEvent;// マウスを動かした。
function myGetEvent( evt ){
myEvent = ( evt ) ? evt : window.event;// FireFox 対策
myObj=document.getElementById("cursor").style;
myObj.left = document.body.scrollLeft + myEvent.clientX + 15; // X表示位置
myObj.top = document.body.scrollTop + myEvent.clientY + 15; // Y表示位置
}
// --></script>



サンプルだけの HTMLは こちらへ

説明


[Q] マウスカーソルに文字や画像がついてくるサンプルを作ってください。
[A] Step.88 がそのまま使えそうです。


onmousemove イベント時の処理に入れ込みます。
この辺は、Step.88 を参照してください。100% 流用です。


参考ステップ
Step.88 リンク先の補足説明窓を表示してみましょう 


 
イヌでもわかるJavaScript講座 お品書き へ戻ります