プロが教えるわが家の防犯対策術!

こんにちは。
一昔前に流行ったかと思うのですが、
マウスに画像がついてくるものを行いたいです。
ただ、流行った時代のものではIEにしか対応していないというものばかりで、FireFoxやサファリなど、他のブラウザだと表示されなくなります。
IE以外のブラウザでも表示可能な方法はありますでしょうか?

こんな風にマウスに画像がついてくる事をどのブラウザでも出来るようにしたいです。
http://www3.ocn.ne.jp/~motiya/java/sample-3/move …

よろしくお願いします。

A 回答 (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>
    • good
    • 0
この回答へのお礼

_pipi_さんありがとうございます。

コードを教えていただき、助かりました。
FireFoxや他ブラウザでも使用できました。

ありがとうございました。m(_ _)m

お礼日時:2009/02/24 11:15

マウス位置の取得がブラウザによって異なるので、その部分を調整してあげればよいのでは?


マウス位置がわかれば、その位置に(少し時間差をつけて)画像を表示すればよいと思われます。画像の表示はCSSなどを利用すれば、どのブラウザでも同じですからあまり問題にならないでしょう。

以下、マウスの位置の取得方法の参考です。
 http://archiva.jp/web/javascript/get_mouse-posit …
 http://www.openspc2.org/JavaScript/Ajax/Ajax_stu …
    • good
    • 0
この回答へのお礼

アドバイスありがとうございます。

_pipi_さんのコードを使用してみたところ、
作動致しました。

自分の為にも、教えていただいたところを参照して勉強させていただきます。
ありがとうございました。

お礼日時:2009/02/24 11:13

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!