- ベストアンサー
マウスに画像がついてくる
こんにちは。 一昔前に流行ったかと思うのですが、 マウスに画像がついてくるものを行いたいです。 ただ、流行った時代のものではIEにしか対応していないというものばかりで、FireFoxやサファリなど、他のブラウザだと表示されなくなります。 IE以外のブラウザでも表示可能な方法はありますでしょうか？ こんな風にマウスに画像がついてくる事をどのブラウザでも出来るようにしたいです。 http://www3.ocn.ne.jp/~motiya/java/sample-3/move_zan.htm よろしくお願いします。
- che2525
- お礼率100% (3/3)
- JavaScript
- 回答数2
- ありがとう数6
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>test</title> <body> <script type="text/javascript"> //@cc_on //全角空白は、半角空白かタブに変換のこと function MouseStoker (n, image, x, y) { var count = n, d = document, p = d.createElement('p'), i; this.max = n; this.images = []; this.pointer = 0; this.mouse = {}; this.soutai = { 'x':x, 'y':y }; while (count--) { i = d.createElement('img'); i.src = image; i.alt = image; i.style.position = 'absolute'; this.images.push(p.appendChild(i)); } d.body.appendChild(p); document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mousemove', (function (cb_) { return function (evt) { /*@if(1) cb_.mouse.x = evt.x + document.body.scrollLeft; cb_.mouse.y = evt.y + document.body.scrollTop; @else@*/ cb_.mouse.x = evt.pageX ; cb_.mouse.y = evt.pageY ; /*@end@*/ }; })(this), false); setInterval( (function (cb_) { return function () { with ( cb_.images[ cb_.pointer = (++cb_.pointer) % cb_.max ].style ) top = cb_.soutai.y + cb_.mouse.y + 'px', left = cb_.soutai.x + cb_.mouse.x + 'px'; }; })(this), 5); } new MouseStoker(10, './img/0.gif',0,-25);//個数と画像 new MouseStoker(20, './img/1.gif',25,0);//個数と画像 new MouseStoker(30, './img/2.gif',0,25);//個数と画像 new MouseStoker(40, './img/3.gif',-25,0);//個数と画像 </script>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
マウス位置の取得がブラウザによって異なるので、その部分を調整してあげればよいのでは？ マウス位置がわかれば、その位置に（少し時間差をつけて）画像を表示すればよいと思われます。画像の表示はＣＳＳなどを利用すれば、どのブラウザでも同じですからあまり問題にならないでしょう。 以下、マウスの位置の取得方法の参考です。 http://archiva.jp/web/javascript/get_mouse-position.html http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter05/013/index.html
お礼
アドバイスありがとうございます。 _pipi_さんのコードを使用してみたところ、 作動致しました。 自分の為にも、教えていただいたところを参照して勉強させていただきます。 ありがとうございました。
お礼
_pipi_さんありがとうございます。 コードを教えていただき、助かりました。 FireFoxや他ブラウザでも使用できました。 ありがとうございました。m(_ _)m