![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
こんにちは。
一昔前に流行ったかと思うのですが、
マウスに画像がついてくるものを行いたいです。
ただ、流行った時代のものではIEにしか対応していないというものばかりで、FireFoxやサファリなど、他のブラウザだと表示されなくなります。
IE以外のブラウザでも表示可能な方法はありますでしょうか?
こんな風にマウスに画像がついてくる事をどのブラウザでも出来るようにしたいです。
http://www3.ocn.ne.jp/~motiya/java/sample-3/move …
よろしくお願いします。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_12.png?5a7ff87)
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>
_pipi_さんありがとうございます。
コードを教えていただき、助かりました。
FireFoxや他ブラウザでも使用できました。
ありがとうございました。m(_ _)m
No.1
- 回答日時:
マウス位置の取得がブラウザによって異なるので、その部分を調整してあげればよいのでは?
マウス位置がわかれば、その位置に(少し時間差をつけて)画像を表示すればよいと思われます。画像の表示はCSSなどを利用すれば、どのブラウザでも同じですからあまり問題にならないでしょう。
以下、マウスの位置の取得方法の参考です。
http://archiva.jp/web/javascript/get_mouse-posit …
http://www.openspc2.org/JavaScript/Ajax/Ajax_stu …
アドバイスありがとうございます。
_pipi_さんのコードを使用してみたところ、
作動致しました。
自分の為にも、教えていただいたところを参照して勉強させていただきます。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- デスクトップパソコン 全画面表示でもタスクバーを前面に隠す、表示させるようにしたい 3 2022/03/23 12:30
- その他(ブラウザ) angel ブラウザってなぜアプリのクラッシュやフリーズが多いのでしょうか?? 特定のサイトにこのブ 3 2023/02/06 20:17
- その他(パソコン・スマホ・電化製品) ノートPCの画面がせまくなってしまいました。 3 2022/04/23 18:47
- Chrome(クローム) インターネットの各サイトの画像が表示されない 3 2022/12/04 22:43
- その他(ブラウザ) テキストを入れるときの縦線の点滅がそれ以外のブラウザ上にも表れます。 1 2022/07/29 21:55
- Windows 10 PC画面の下のタスクバーの表示、非表示について 1 2022/03/22 23:53
- Chrome(クローム) 最近Win10にてブラウザが左にスッと隠れていく現象に悩まされてます 3 2023/07/22 23:11
- Chrome(クローム) ブラウザを立ち上げたとき 1 2022/08/06 13:35
- マウス・キーボード Bluetoothのクイックペアリングについて 8 2023/03/25 16:50
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
1枚の画像をクリックすると複数...
-
オンマウスで、画像切り替え+...
-
PC設定に依存しない曜日判定JS...
-
特定の画像を非表示にする方法
-
ページ読込中に表示が崩れるの...
-
javascriptで毎月替わる画像
-
Javascript で共通の処理をどこ...
-
画像カウントダウン当時以降を0...
-
ホームページビルダー13を使っ...
-
jQuery FlexSliderのカルーセ...
-
リアルタイム株価 ヤフー株価
-
JavaScriptを使って日を追うご...
-
画像の上に画像リンクを貼る方法
-
中心を軸にくるくる回るjQuery ...
-
画像をフォルダから自動読み込み。
-
アクセス毎に画像を順番に表示...
-
p5jsについて
-
innerHTMLで、表示すると、一部...
-
jspでcssが読み込めない
-
スクロール可能なチェックボックス
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
HTMLで条件分岐はできますか?
-
画像ランダム表示、しかしダブ...
-
bxsliderにて読み込み後に内容...
-
画像を切り替えランダム表示
-
1枚の画像をクリックすると複数...
-
Gifアニメ、最後のコマに行った...
-
画像の重なりの順序を代える方...
-
小窓について教えて下さい。
-
スライダーを実装した場合、ペ...
-
スワップイメージが上手く動作...
-
USEMAPでの指定区域にマウスオ...
-
1枚の画像をクリックして複数の...
-
クリッカブルマップの一部分だ...
-
オンマウスで、画像切り替え+...
-
iframe内のリンク文字のマウス...
-
edgeでスクロールバーに色が表...
-
画像の上に画像リンクを貼る方法
-
prettyphotoの画像表示について
おすすめ情報