こんにちは。
一昔前に流行ったかと思うのですが、
マウスに画像がついてくるものを行いたいです。
ただ、流行った時代のものではIEにしか対応していないというものばかりで、FireFoxやサファリなど、他のブラウザだと表示されなくなります。
IE以外のブラウザでも表示可能な方法はありますでしょうか?
こんな風にマウスに画像がついてくる事をどのブラウザでも出来るようにしたいです。
http://www3.ocn.ne.jp/~motiya/java/sample-3/move …
よろしくお願いします。
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ランキング
-
Javascript で共通の処理をどこ...
-
1枚の画像をクリックして複数の...
-
bxsliderにて読み込み後に内容...
-
Javascriptで指定した日付と時...
-
onclickで自分自身の画像を変更...
-
JavaScript で flexslider の画...
-
Ajaxで画像の削除
-
スライダーを実装した場合、ペ...
-
画像をドラッグ&ドロップで移...
-
textareaに画像を表示したい
-
jQueryスライドショー画像への...
-
JavaScript スライドの画像にリ...
-
target="new"を書き込む場所
-
クリッカブルマップにロールオ...
-
smartRolloverのカスタマイズに...
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
-
読み込んだQRコードをフォーム...
-
JSPでの画像ファイル表示
-
【jQuery】遅延実行(タイムラ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
1枚の画像をクリックすると複数...
-
JavaScript スライドの画像にリ...
-
画面の表示位置を指定させて表...
-
1枚の画像をクリックして複数の...
-
JavaScript で flexslider の画...
-
オンマウスで、画像切り替え+...
-
透過pngの透明部分以外をクリッ...
-
textareaに画像を表示したい
-
prettyphotoの画像表示について
-
Gifアニメ、最後のコマに行った...
-
画像をフォルダから自動読み込み。
-
Javascriptで指定した日付と時...
-
ページ読込中に表示が崩れるの...
-
JavaScriptとチェックボックス...
-
jQueryで特定のURLの時のみ表示
-
各フォルダから1枚ずつ画像をラ...
-
画像の重なりの順序を代える方...
-
特定の画像を非表示にする方法
-
image.onload = .. の後に imag...
-
重なった画像にクリックイベン...
おすすめ情報