![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
マウスカーソルが重なったとき、イメージを切り替える処理を
行おうと思っています。
<img src="top_01.gif"
onMouseOver="this.src='top_02.gif'"
onMouseOut="this.src='top_01.gif'">
このようなソースでイメージを切り替えているのですが、
マウスカーソルが重なったときに初めて新しいイメージ
(この場合は'top_02.gif')を読み込むようです。
これだとタイムラグができてしまうので、最初にhtmlファイルを読み込む際、
あらかじめ新しい画像を読み込むにはどうすればよいのでしょうか?
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_04.png?8acaa2e)
No.1ベストアンサー
- 回答日時:
少々強引ですが
<body>
<img src='top_01.gif' width='0' height='0'>
<img src='top_02.gif' width='0' height='0'>
</body>
と書いてみてはいかがでしょうか?
たて横サイズ0の絵としてあらかじめ同じHTMLで表示させてしまえばタイムラグは改善されるのでは?と思いますが…
この回答への補足
ただ、サイズを0にしても、オブジェクトの痕跡(?)は残るんですね・・・。
画面を反転させると、1バイト文字分くらいの空間が・・。
↑と書いてしまいましたが、
STYLE="display:none"
と、スタイルシートを使用することで解消できました。
どうもありがとうございます。
回答ありがとうございます。
この方法は考えてはいたんですが、試したことはありませんでした。
実際試したところ、うまくいきました。
ただ、サイズを0にしても、オブジェクトの痕跡(?)は残るんですね・・・。
画面を反転させると、1バイト文字分くらいの空間が・・。
No.5
- 回答日時:
少し寝不足気味ですので、日本語が変かもしれません。
ごめんなさい。JavaScriptで、NS4、NS6、IE4、IE5、IE6をカバーするものを紹介しておきます。まず、お気に入りの PreLoad Image Script を決めます。
「 progressbar.js 」を個人的には気に入っています。(yahoo米国で検索すれば、もうどれがルーツだか判らないですね。(^^)
http://scriptasylum.com/miscpage.html
<script language="javascript" src="progressbar.js"></script>
でインクルードして、実は progresbar.js を活用するスクリプトも色々あるようです。
http://www.dynamicdrive.com/dynamicindex4/
に2つ利用例があります。個人的には、
http://www.dynamicdrive.com/dynamicindex4/preloa …
を使いたいですね。(実際に使っていますよ) IEでもNSでも動作します。(^^)
var Slides = new Array(
'top_01.gif', // コメント1
'top_02.gif', // コメント2
'top_xx.gif' // コメントx
);
と、簡単に追加できますね。
最後に、面白いページを紹介しておきます。そのものズバリのカンニング用URLをご紹介しましょう。以下の参考URLです。「#X」には基本画像ファイル、「MOIX」にはマウスが通過した際の画像、そして「URLX」にはクリックした場合のリンク先ですね。「Done! Make My Script!」ボタンを押せば、実力に関係なく出来上がります。(^^)
電子メールアドレスの入力フォームがありますが、小生なら間違っても入力しません。コピー/貼り付けで処理しましょう。(^^);
参考URL:http://javascript.internet.com/generators/preloa …
No.4
- 回答日時:
<HTML>
<HEAD>
<TITLE>先行読込み</TITLE>
<SCRIPT Language="JavaScript">
<!--
sFile = new Image();
sFile.src="sakiyomi0.gif";
sFile.src="sakiyomi1.gif";
sFile.src="sakiyomi2.gif";
// -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
これでどうでしょうか??
参考URL:http://ad.il24.net/~ura/java/sakiyomi.htm
解答ありがとうございます。
ご返事が遅くなり、大変申し訳ありません。
ちょっと今たてこんでおりまして、
実際に試してみるのが遅れてしまいますが、
たくさんの方から解答を頂いたので、
全て試してみて考えさせていただきます。
No.3
- 回答日時:
こんばんわー
問題は解消されているようですがJavaScriptであたらしい画像を読み込みを
実現させるときの手段もあるようなので紹介します。
http://tohoho.wakusei.ne.jp/wwwxx001.htm
こちらのページで「マウスを乗せると絵が変わる」でソースを参照されてみては
どうでしょうか‥‥
参考URL:http://tohoho.wakusei.ne.jp/wwwxx001.htm
解答ありがとうございます。
ご返事が遅くなり、大変申し訳ありません。
このサイトはよく参照させて頂いていたのですが、
見落としていたようです。
試してみます。
No.2
- 回答日時:
宣言を先に行っておけばできるはずです。
------------------------------------------
<script language="JavaScript">
var top_01;
var top_02;
top_01 = 'top_01.gif';
top_02 = 'top_02.gif';
</script>
<img src="top_01.gif"
onMouseOver="this.src=top_02"
onMouseOut="this.src=top_01">
※未テストです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) 【VBA】写真の縦横比を変えずに貼り付ける 5 2023/06/13 11:42
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS htmlとcssで吹き出しの中に文字を置きたいのですが、 html 〈div class bb〉 〈 3 2023/02/04 22:44
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- C言語・C++・C# pythonのファイルの並びでの読み込みとリストについて 4 2022/04/13 03:52
- Perl Perlで特定文字列から特定文字列までを抜き出したい 4 2022/04/02 14:24
- Chrome(クローム) 最近のGoogle Chromeのデータ読み込みの遅延やエラーって頻発しますか? 2 2023/01/06 22:12
- Visual Basic(VBA) 【VBA】写真の貼り付けコードがうまく機能しません。 5 2022/09/01 18:43
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
フルスクリーン表示についての応用
-
c++std::string型をTCHARに変換...
-
1つの画像クリックで切替の方法
-
JSPでの画像ファイル表示
-
画像の下に説明文をつけて切り...
-
jQueryを使ってランダムに表示
-
image.onload = .. の後に imag...
-
ランダムで表示させたブロック...
-
iframe内からjQueryで指定したい
-
固定ナビのJqueryのアコーディ...
-
イベントハンドラを完全に外部...
-
【スマホ】画像ボタンを押した...
-
マウスオーバーにてdivの切り替え
-
プルダウンの位置がwin/macでず...
-
画像とコメントの同時表示をし...
-
JavaScriptで変更した属性の元...
-
ページの背景画像を短冊状に切...
-
マウスを乗せるとメニュー表示
-
【javascript】ロールオーバー...
-
Javascriptで指定した日付と時...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JSPでの画像ファイル表示
-
画面が真っ白になるのはどうして?
-
c++std::string型をTCHARに変換...
-
フォームに入力された値により...
-
javascriptの sx, sy, sw, sh, ...
-
日替わりで画像を変更したい
-
画像ファイルの合成
-
OpenCVを用いたヒストグラムの...
-
Excel VBA マクロ 画像(...
-
ランダムに画像を表示し、ポッ...
-
クリックして変更した画像を他...
-
C言語のポインタ表現
-
「戻る」「進む」ボタンで画像...
-
1つの画像クリックで切替の方法
-
クリックすると小さい画像がキ...
-
ロールオーバーとOnclickで
-
サムネイル画像をマウスオーバ...
-
JavaScriptでボタンをクリック...
-
CGI 16進数をバイナリ-に変換
-
Javascriptで画像を水面のよう...
おすすめ情報