• ベストアンサー

マウスに画像がついてくる

こんにちは。 一昔前に流行ったかと思うのですが、 マウスに画像がついてくるものを行いたいです。 ただ、流行った時代のものではIEにしか対応していないというものばかりで、FireFoxやサファリなど、他のブラウザだと表示されなくなります。 IE以外のブラウザでも表示可能な方法はありますでしょうか？ こんな風にマウスに画像がついてくる事をどのブラウザでも出来るようにしたいです。 http://www3.ocn.ne.jp/~motiya/java/sample-3/move_zan.htm よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
noname#84373
noname#84373
回答No.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>

che2525
質問者

お礼

_pipi_さんありがとうございます。 コードを教えていただき、助かりました。 FireFoxや他ブラウザでも使用できました。 ありがとうございました。m(_ _)m

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

マウス位置の取得がブラウザによって異なるので、その部分を調整してあげればよいのでは？ マウス位置がわかれば、その位置に（少し時間差をつけて）画像を表示すればよいと思われます。画像の表示はＣＳＳなどを利用すれば、どのブラウザでも同じですからあまり問題にならないでしょう。 以下、マウスの位置の取得方法の参考です。 　http://archiva.jp/web/javascript/get_mouse-position.html 　http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter05/013/index.html

che2525
質問者

お礼

アドバイスありがとうございます。 _pipi_さんのコードを使用してみたところ、 作動致しました。 自分の為にも、教えていただいたところを参照して勉強させていただきます。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • IEブラウザはpngの透過画像は透過にならないのが仕様でしょうか？

    IEブラウザはpngの透過画像は透過にならないのが仕様でしょうか？ IE6でpngの透過画像を表示させると、透過になっていませんでした。 FireFoxやサファリは透過になります。 仕方がないので、画像をgifの透過にしましたが、 このようにブラウザによって、gif, jpeg, pngの仕様は異なりますか？ もうIE6は見捨てたくなります。

    • ベストアンサー
    • CSS
  • マウスのスクロールボタンが使えなくなった・・・

    つい最近ブラウザをIEからFirefoxに変えました。すると以前使えていた マウスのスクロールボタンが使えなくなってしまいました・・・ スクロールだけならできるのですが、それでは不便なんです。 私はできればIEからFirefoxには戻したくないんです。 なにかマウスを買い換えるとか、ブラウザを変える以外に解決方法がないでしょうか・・・ ちなみに私が使用しているマウスはマイクロソフト製のＨＩＤ準拠マウスです。

  • マウスカーソルに画像が追っかけてくる

    マウスカーソルに画像が追っかけてくるのを時々見かけます。 自分のページでも試してみましたがうまくいきません。 1つだけのページでは動作しましたが、フレームを使用しているため、別フレームにいくと切れてしまいます。 この「カーソルを画像が追っかけてくる」をフレームを越えて適用する方法はありませんか？ ○使用したプログラム http://www2s.biglobe.ne.jp/~club_tom/java-kouza/ja-index.htm ↑ここの「お遊び」→3.2「マウスカーソルを動かすと画像が付いて来ます。」です。 大小5個の☆の画像があり、大の☆マーク→小の☆マークとカーソルに付いて来ることで、流れ星のように見えるというものです。 フレームを設定するだけのファイルに載せてみましたがダメでした。 全フレームにプログラムを載せると表示した時にすべてのフレームに☆が表示されてしまいます。 どなたかご存知の方、参考URLでもかまいませんのでよろしくお願いします。

  • 画像を見ようとすると‥

    えー・HPの画像をクリックすると、下の方に「java script」とか表示されて、うまく見れなくなります! OSはWINXPでブラウザはIE6であります。 どなたか、初心者の私にお教え下さい!!

  • IEで画像が見られない！

    ホームページを作っています。 とある画像（JPEG画像）を載せました。 サファリやファイヤーフォックスでは見られるのですが、 なぜがIEで見ることができません。 ディレクトリの階層などはあっています。 原因が分からず困っています。 どなたかご教授のほど、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • gif画像をエクセルのシートに貼り付けて動かしたい

    gif画像をエクセルのシートに貼り付けて動かしたいのですが可能でしょうか？ ぐぐったら http://home.att.ne.jp/zeta/gen/excel/c04p23.htm がヒットしたのですが、 これは複数の画像を表示する方法ですよね？ やりたい事はひとつのtest.gifと言うファイルをエクセル上で動かしたいのです。 例えばサンプルとして http://www.civillink.net/sozai/move.html のペンギンををダウンロードしてデスクトップに落としましたが これをエクセル上でブラウザと同じく動的に表示させることは可能でしょうか？ ご回答よろしくお願いします。

  • マウスオーバーで画像を切り替えたい！

    みなさん，よろしくお願いします。 リンク文字にマウスを持ってきたときに， 画像を切り替えたいと思っています。 でも，リンク文字にマウスを持ってきたときに， 指の形に変わり”ピコピコ”動いてしまいます。 とても気になるので，”ピコピコ”動かないようにしたいのですが， どのようにすればよろしいのでしょうか？ よろしくお願いします。 方法にはこだわりません，画像が切り替えれれば・・。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>Sample</title> <script language="JavaScript"><!-- function changeIframe(changeURL) { myFrame.location.href = jumpURL; } // --></script> </head> <body> <a href="No1.htm" onmousemove="changeIframe('Sample1.JPG')">こっちへ</a> <a href="No2.htm" onmousemove="changeIframe('Sample2.JPG')">あっちへ</a> <a href="No2.htm" onmousemove="changeIframe('Sample2.JPG')">そっちへ</a> <iframe src="First.html" name="myIFrame" width="320" height="240" scrolling="no" frameborder="0"></iframe> </body> </html>

  • ブラウザで見たとき、画像が変に表示されます

    ブラウザ（IE,Firefox）で見たとき、一部の画像がこのように表示されます。 （全ての画像ではありません）。 履歴などは全て消しました。 どのようにすれば、普通に画像が見られるようになるのか教えていただけると幸いです。

  • 背景画像の変更と保存

    1.プルダウン（セレクト）メニューで画像名を選択すると、背景画像が変更できる 2.背景画像によって、配置位置を指定できる（右上固定/全面に繰り返し表示等） 3.ブラウザを閉じて開いても、選択した画像が背景に表示される 下記がイメージに近いのですが、2と3の機能がありません。 http://www2s.biglobe.ne.jp/~club_tom/java-kouza/sample/ha/ha-no5_2/ha-no5_2.htm 再現できるスクリプトを紹介して頂けると助かります。宜しくお願い致します。

    • ベストアンサー
    • HTML
  • Ｆｉｆｏｘ３でＧＩＦ画像が表示されません。

    Ｆｉｒｅｆｏｘの最新版３をつかっているのですが、 当方のつくっているＨＰで なぜかＧＩＦ画像が表示されません。 ＪＰＥＧは表示されています。 ＩＥではＧＩＦ画像はきちんと表示されますし、 他のブラウザでも表示されています。 別のパソコンでも表示されます。 それがなぜか私のＦｉｒｅｆｏｘだけで表示されません！ どこか設定すればよいのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する