マウスカーソルが重なったとき、イメージを切り替える処理を
行おうと思っています。
<img src="top_01.gif"
onMouseOver="this.src='top_02.gif'"
onMouseOut="this.src='top_01.gif'">
このようなソースでイメージを切り替えているのですが、
マウスカーソルが重なったときに初めて新しいイメージ
(この場合は'top_02.gif')を読み込むようです。
これだとタイムラグができてしまうので、最初にhtmlファイルを読み込む際、
あらかじめ新しい画像を読み込むにはどうすればよいのでしょうか?
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ランキング
-
JSPでの画像ファイル表示
-
ロールオーバー効果にならない。
-
画面が真っ白になるのはどうして?
-
ロールオーバー画像のリンク設...
-
javascriptで複数の画像をラン...
-
商品画像リンク (image_link)...
-
C言語のポインタ表現
-
日替わりで画像を変更したい
-
javascritpの中身をHTML-lintで...
-
MAX関数を使ってからLEFT JOIN...
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
jqueryのsortableで一部ソート...
-
ネストされたチェックボックス...
-
iframe内のリンクが飛ばないの...
-
条件分岐でキーが入力されてい...
-
テキストエリア内の一部の文字...
-
一定時間ごとにgif画像の切...
-
外部javascriptの重複を防ぐには
-
【HTML、VBScript】HTAでのイベ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
c++std::string型をTCHARに変換...
-
JSPでの画像ファイル表示
-
画面が真っ白になるのはどうして?
-
クリックして変更した画像を他...
-
C言語のポインタ表現
-
Javascriptで画像を水面のよう...
-
日替わりで画像を変更したい
-
Excel VBA マクロ 画像(...
-
javascriptで複数の画像をラン...
-
フォームに入力された値により...
-
ランダム表示の画像位置
-
JavaScriptでボタンをクリック...
-
ロールオーバー効果にならない。
-
クリックした自身の画像を別画...
-
「戻る」「進む」ボタンで画像...
-
フルスクリーン表示についての応用
-
ファイル名の頭にゼロを付ける...
-
マウスオーバーで画像変更で
-
onとoffを画像でチェンジ、チェ...
-
MinGWでfreetypeのmake時に
おすすめ情報