イメージをあらかじめ読み込むには？

解決済

質問者：oom
質問日時：2002/05/09 15:01
回答数：5件

マウスカーソルが重なったとき、イメージを切り替える処理を
行おうと思っています。

<img src="top_01.gif"
onMouseOver="this.src='top_02.gif'"
onMouseOut="this.src='top_01.gif'">

このようなソースでイメージを切り替えているのですが、
マウスカーソルが重なったときに初めて新しいイメージ
(この場合は'top_02.gif')を読み込むようです。

これだとタイムラグができてしまうので、最初にhtmlファイルを読み込む際、
あらかじめ新しい画像を読み込むにはどうすればよいのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： noname#6248
回答日時：2002/05/09 16:00

少々強引ですが

<body>
<img src='top_01.gif' width='0' height='0'>
<img src='top_02.gif' width='0' height='0'>

</body>
と書いてみてはいかがでしょうか？
たて横サイズ0の絵としてあらかじめ同じHTMLで表示させてしまえばタイムラグは改善されるのでは？と思いますが…

この回答への補足

ただ、サイズを０にしても、オブジェクトの痕跡(？)は残るんですね・・・。
画面を反転させると、１バイト文字分くらいの空間が・・。

↑と書いてしまいましたが、
STYLE="display:none"
と、スタイルシートを使用することで解消できました。

どうもありがとうございます。

補足日時：2002/05/09 20:58

通報する

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

この方法は考えてはいたんですが、試したことはありませんでした。
実際試したところ、うまくいきました。

ただ、サイズを０にしても、オブジェクトの痕跡(？)は残るんですね・・・。
画面を反転させると、１バイト文字分くらいの空間が・・。

通報する

お礼日時：2002/05/09 20:39

No.5

回答者： Ujiki
回答日時：2002/05/10 02:55

　少し寝不足気味ですので、日本語が変かもしれません。

ごめんなさい。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/
に２つ利用例があります。個人的には、
http://www.dynamicdrive.com/dynamicindex4/preloa …
を使いたいですね。(実際に使っていますよ) IEでもNSでも動作します。(^^)

var Slides = new Array(
'top_01.gif', // コメント１
'top_02.gif', // コメント２
'top_xx.gif' // コメントｘ
);

と、簡単に追加できますね。

　最後に、面白いページを紹介しておきます。そのものズバリのカンニング用URLをご紹介しましょう。以下の参考URLです。「＃Ｘ」には基本画像ファイル、「ＭＯＩＸ」にはマウスが通過した際の画像、そして「ＵＲＬＸ」にはクリックした場合のリンク先ですね。「Done! Make My Script!」ボタンを押せば、実力に関係なく出来上がります。(^^)
電子メールアドレスの入力フォームがありますが、小生なら間違っても入力しません。コピー／貼り付けで処理しましょう。(^^);

参考URL：http://javascript.internet.com/generators/preloa …

- 0
- 件

通報する

No.4

回答者： lmeelm
回答日時：2002/05/09 21:41

<HTML>

<HEAD>
<TITLE>先行読込み</TITLE>
<SCRIPT Language="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

これでどうでしょうか？？

参考URL：http://ad.il24.net/~ura/java/sakiyomi.htm

- 0
- 件

通報する

この回答へのお礼

解答ありがとうございます。
ご返事が遅くなり、大変申し訳ありません。

ちょっと今たてこんでおりまして、
実際に試してみるのが遅れてしまいますが、
たくさんの方から解答を頂いたので、
全て試してみて考えさせていただきます。

通報する

お礼日時：2002/05/19 05:29

No.3

回答者： howsike
回答日時：2002/05/09 21:30

こんばんわー

問題は解消されているようですがJavaScriptであたらしい画像を読み込みを
実現させるときの手段もあるようなので紹介します。

http://tohoho.wakusei.ne.jp/wwwxx001.htm
こちらのページで「マウスを乗せると絵が変わる」でソースを参照されてみては
どうでしょうか‥‥

参考URL：http://tohoho.wakusei.ne.jp/wwwxx001.htm

- 0
- 件

通報する

この回答へのお礼

解答ありがとうございます。
ご返事が遅くなり、大変申し訳ありません。

このサイトはよく参照させて頂いていたのですが、
見落としていたようです。
試してみます。

通報する

お礼日時：2002/05/19 05:27

No.2

回答者： Mizyu
回答日時：2002/05/09 16:11

宣言を先に行っておけばできるはずです。

------------------------------------------
<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">

※未テストです。