- ベストアンサー
オンマウスで画像入換えするときに、マウスをのせる前に先に画像をダウンロードしておく方法
いつもお世話になります。 さて、今回の質問ですが、ある画像にマウスをのせたときに、その画像を別の画像に入れ換えるという技がありますよね。そこで、普通にタグを書くと <img src="マウスポインタが画像にのっていないときの画像" onmouseover="this.src='マウスポインタが画像にのっているときの画像" onmouseout="this.src='マウスポインタが画像から外れたときの画像'"> ですよね。 あるいはJavaScriptを使うと <A HREF="リンク先（http://～）" onMouseOver="スクリプト名.src='マウスポインタが画像にのっているのきの画像'" onMouseOut="スクリプト名.src='マウスポインタが画像にのっていないときの画像'"><IMG SRC="マウスポインタが画像にのっていないときの画像" NAME="スクリプト名" border="0"></A> と記載しますが、どちらの方法も、マウスポインタが画像にのってから入れ換える画像をダウンロードしてしまうと思うんですが、これだと回線が遅い方ではマウスポインタをのせてから画像が入れ替わるまで時差が発生してしまいます。そうならないように、はじめから入れ換え用の画像をダウンロードしておく方法はありませんか。 文章の構成が分かりにくて申し訳ありませんが、よろしくお願いします。
- jnr-fun
- お礼率57% (81/141)
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
javascriptで画像の先読み（プレロード）が出来ます。 例（プレロード+オンマウスオーバー） <html> <head> <title>画像の先読み（プレロード）</title> <script language="JavaScript"><!-- a = new Image(); a.src = "1.gif" border="0"; (new Image()).src = "2.gif"; // --></script> </head> <body> <a href="*.html" onMouseover="document.js_omo.src='1.gif'" onMouseout="document.js_omo.src='2.gif'"> <img src="2.gif" border="0" name="js_omo"> </a> </body> </html>
その他の回答 (1)
しばらく前の回答ですが、役に立つと思います。 myImageOut = new Image(); myImageOut.src = "IMG_1876.jpg"; myImageOver = new Image(); myImageOver.src = "IMG_1882.jpg"; この部分が、プリロードの部分です。
関連するQ&A
- オンマウスで画像を変えたい。
オンマウスで画像を変えたいのですが、 ------------------------------------------ <img src="画像１URl" onmouseover="this.src='画像２URl';" onmouseout="this.src='画像１URl';"> ------------------------------------------ や、 ------------------------------------------ <script> var src1="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" var src2="http://i.yimg.jp/images/news/yjnews.gif" </script> <img src="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" onMouseOver="this.src=src2" onMouseOut="this.src=src1" /> ------------------------------------------ など。 どれを使っていいか分からず困っています。 これぞ、っていうタグがあったらよろしくお願いします。
- ベストアンサー
- HTML
- オンマウスでの拡大画像の位置指定
サムネイル画像にオンマウスした時の拡大画像の位置指定がよくわかりません。今の状態だとマウスを乗せた時に拡大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。できたら、拡大画像をサムネイル画像かぶらせず、左側に表示させたいのですがどう指定したらよいのでしょうか？ついでに拡大画像を右側、上、下に指定したい時の表示方法もあわせてアドバイスいただけたらありがたいです。 それと、サムネイル画像の下にちょっとしたコメントを記載したい時はどうしたら良いのでしょうか？どうかよろしくお願いします。 <script> var src1="image01.jpg" var src2="image1.jpg" var src3="image02.jpg" var src4="image2.jpg" var src5="image03.jpg" var src6="image3.jpg" var src7="image04.jpg" var src8="image4.jpg" </script> <p align="center"> <img src="image01.jpg" onmouseover="this.src=src2" onmouseout="this.src=src1"> <br> <br> <img src="image02.jpg" onmouseover="this.src=src4" onmouseout="this.src=src3"> <br> <br> <img src="image03.jpg" onmouseover="this.src=src6" onmouseout="this.src=src5"> <br> <br> <img src="image04.jpg" onmouseover="this.src=src8" onmouseout="this.src=src7"> <br> </p>
- 締切済み
- CSS
- 画像をランダムに表示させマウスを重ねるとさらに切り替わる方法
今ＨＰを作成しているんですが、題名の方法が知りたいです。 JavaScriptを使って画像をランダムに表示させる方法ありますよね。 <script language="javascript"> <!-- //ランダムに画像を表示 img = new Array(); img[0] = "画像1"; img[1] = "画像2"; img[2] = "画像3"; n = Math.floor(Math.random()*img.length); document.write("<img src='"+img[n]+"' border='0'>"); //--> </SCRIPT> それとマウスを重ねると画像が変わる onmouseover="this.src='画像4'" onmouseout="this.src='画像5'" というタグありますよね。 2つのタグを組み合わせてランダムに表示された画像に マウスを重ねると画像がかわるということがやりたいのですが JavaScriptの知識があまりないためわかりません。 この方法は可能でしょうか？ もしくは他の方法あるでしょうか？ ランダムに表示される画像は３枚と仮定し、 それぞれ３枚の画像はマウスを重ねるごとに 違う画像を表示させたいと思っています。 解決法をわかるかたがいらっしゃったら よろしくお願い致します。
- ベストアンサー
- HTML
- マウスオーバーで画像の切替でタイマーをつけるには？
<html> <head> <script type="text/JavaScript"> <!-- imglist = ["img1.gif", "img2.gif"]; preImage = new Array(); for (i=0; i<imglist.length; i++) { preImage[i] = new Image(); preImage[i].src = imglist[i]; } //--> </script> </head> <body> <img src="img1.gif" onmouseover="this.src='img2.gif'" onmouseout="this.src='img1.gif'"> </body> </html> 例えば上記のようなソースでimg1の画像にマウスオーバーでimg2に画像が入れ替わるのですが、 マウスアウトした時に、すぐimg1の画像に戻るのではなく、img2の画像を1分くらい出して その後img1に入れ替わるようにしたいのですが、どうしたらよいでしょうか？ 教えてください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 離れた場所にマウスオーバーで画像を変えたい。
宜しくお願いします。 色々と調べて試してみるのですが解決できず、こちらでご相談させ頂こうと思います・・・。 サイト内にあるボタン自体をマウスオーバーで変化させ、かつそのボタンを選択している時には、別の離れた場所にも指定した画像を表示させたいと考えております。 1つやっかいなのが、今回.3つ画像があるのですが、3つとも微妙に異なる場所へ表示させなければなりません。一応、簡単な資料を作成しましたので添付のデータをご確認頂きたいのですが・・・。 配置はそれぞれ記載されている感じで、#A、#B、#Cというコンテナ内に入っているボタン画像にマウスが行くと、ボタン自体もマウスオーバーで変化し、かつ、#container内の赤い画像の場所にも別のsampleA.pngを表示させたいと考えています。 BとCに関しても同様で、それぞれ個別の位置に画像を表示させたいと思います。 ボタン側のマウスオーバーは出来たのですが、更に加えて離れた場所に画像を表示させる方法が分かりません。 <div id="container">ここに画像を表示させたいです！</div> <div id="A"><a href="***"><img src="images/1.png" onmouseover="this.src='images/over1.png'" onmouseout="this.src='images/1.png'"></a></div> <div id="B"><a href="***"><img src="images/2.png" onmouseover="this.src='images/over2.png'" onmouseout="this.src='images/2.png'"></a></div> <div id="C"><a href="***"><img src="images/3.png" onmouseover="this.src='images/over3.png'" onmouseout="this.src='images/3.png'"></a></div> どなたか、こういった方法でサイトを作成させた方いらっしゃいましたらアドバイスいただけますと助かります。 どうぞ、宜しくお願いいたします。m(_ _)m
- ベストアンサー
- CSS
- それぞれの画像をオンマウスのときに違う画像にしたい
下記【１】の通り、画像のランダムリンクはできたのですが それぞれの画像をオンマウスしたときに 違う画像を表示するにはどうすればよいでしょうか？ JavaScriptを使わずに、一枚の画像だけを変える場合は↓のようにやっておりました <a href="http://～" target="_blank" ><img src="img[0] " height="" width="" border="0" onmouseover="this.src='img[0] の色違い画像など';" onmouseout="this.src='img[0] と同じ、もしくは違う画像';"></a> ※例えばimg[0]をオンマウスしたときにimg[2]にしたいのではなく、 それぞれ個別に用意した画像(通常時、オンマウス時、離した後の画像３枚)にしたいのですが。 【１】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://～"; jmp[1] = "http://～"; jmp[2] = "http://～"; jmp[3] = "http://～"; jmp[4] = "http://～"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");
- 締切済み
- JavaScript
- 1つの画像オンマウスで3つの画像を切り替えたい！
現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。 改善方法はありませんでしょうか？ 助けてください！
- ベストアンサー
- JavaScript
- スワップイメージとロールオーバーの組み合わせで…
上の画像をクリックした時に下の画像が切り替わるページを 作ったのですが、上の画像をmouseoverで切り替えるのではなく、 マウスを動かしてもクリックしたら下の画像と連動して上の画像も 切り替えることってできますか？？ javascriptは初心者で、まったくわからずです(>-<) <SCRIPT LANGUAGE="JavaScript"> function doPic(imgName) { stepOn = ("" + imgName); document.step.src = stepOn; } </script> （中略） <a href="javascript:doPic('step1.gif');"><img src="img1.gif" name="img" border="0" onmouseover='this.src="r_img1.gif"' onmouseout='this.src="img1.gif"'></a> <a href="javascript:doPic('step2.gif');"><img src="img2.gif" name="img" border="0" onmouseover='this.src="r_img2.gif"' onmouseout='this.src="img2.gif"' ></a><br> <img name="step" src="step1.gif"> ↑こんな感じで作っております<(_ _)>
- ベストアンサー
- JavaScript
- ポインタを置いたときの色の変更
ポインタを置いたときに変化させる際、画像の場合は、 <img src="a.gif" onMouseOver="this.src='b.gif'" onMouseOut="this.src='a.gif'"> とするといいのは知っているのですが、テーブルのセルの色を変更させる方法は無いのでしょうか？ どなたか教えてください。 お願いします。
- ベストアンサー
- HTML
- 複数の画像を連動してロールオーバーさせたいのですが
宜しくお願い致します。 現在WEBショップを運営しているのですが、 「商品一覧ページ」から「商品詳細ページ」へリンクする画像が3つあり、 現在、それぞれの画像は個別にはロールオーバーするのですが、 3つの画像のどこにポインタを当てても、3つの画像全てが連動してロールオーバーするようにするにはどうすれば良いのでしょうか？ （3つの画像のリンク先は全て同じです） どなたかご存知な方がいらっしゃいましたらご教授頂けると幸いです。 宜しくお願い致します。 <td><p><A href="リンク先(1)" ><img src="img/商品名_1.gif" alt="" onmouseover="this.src='img/商品名_2.gif'" onmouseout="this.src='img/商品名_1.gif'" width="133" height="28" /></A></p> <p><A href="リンク先(1)" ><img src="img/詳細ページ_1.gif" alt="" onmouseover="this.src='img/詳細ページ_2.gif'" onmouseout="this.src='img/詳細ページ_1.gif'" width="133" height="18" /></A></p>
- ベストアンサー
- HTML
