- ベストアンサー
マウスが離れたら元々表示されていた画像に戻したい
次のサンプルでは、 (1) 最初はimg0.gifが表示されています (2) 文字列「やまだ」のうえにマウスが乗るとimg1.gifが表示されます (3) 文字列「すずき」のうえにマウスが乗るとimg2.gifが表示されます (4) 文字列「さとう」のうえにマウスが乗るとimg3.gifが表示されます ここで、各文字列がらマウスが離れたときは表示する画像を最初の「img0.gif」に戻したいです。 素人なりの予想では、たとえば <div onmouseover="changImg1(0,1)">やまだ</div> を <div onmouseover="changImg1(0,1)" onmouseout="changImg1(0,0)">やまだ</div> のように 修正すればできそうな気がしましたが、試すとできませんでした。 具体的な記述をご教示いただきたく、よろしくお願い致します。 <html><head> <script language="javascript"> <!-- if(navigator.appVersion.charAt(0)>=3) { movimg=new Array() movimg[0] = new Image(); movimg[0].src='img0.gif'; movimg[1] = new Image(); movimg[1].src='img1.gif'; movimg[2] = new Image(); movimg[2].src='img2.gif'; movimg[3] = new Image(); movimg[3].src='img3.gif'; }; function changImg1(imgNoA,imgNoB) { if(navigator.appVersion.charAt(0)>=3) { document.images[imgNoA].src=movimg[imgNoB].src; }; }; //--> </SCRIPT> </head><body> <img src="img0.gif"> <div onmouseover="changImg1(0,1)">やまだ</div> <div onmouseover="changImg1(0,2)">すずき</div> <div onmouseover="changImg1(0,3)">さとう</div> </body></html>
- litton101
- お礼率89% (1106/1240)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
> <div onmouseover="changImg1(0,1)" onmouseout="changImg1(0,0)"> > やまだ</div> のように > 修正すればできそうな気がしましたが、試すとできませんでした。 ↑これで、ご希望どおりimg0.gifに戻りましたよ？ 「できませんでした」とは、具体的にどうなったのですか？
その他の回答 (2)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>修正すればできそうな気がしましたが 私もできるような気がします・
お礼
（いつもお世話になってます） すみません、違うところに２つの初歩的ミスがありました。おかげさまで解決しました。 (1) 既にあるコード(onmouseoverのところ)を横着してコピペしたため、 onmouseoutと書くべきところがonmouseoverのままになっていた (2) 画面を更新せず、古い（＝誤ったまま）のコードを何度も実行して首をかしげていた。 顛末以上です。すみません。取り急ぎ御礼申し上げます。
- frisk_blue_love
- ベストアンサー率48% (141/293)
<div onmouseover="changImg1(0,1)" onmouseout="changImg1(0,0)">やまだ</div> <hr> <div onmouseover="changImg1(0,2)" onmouseout="changImg1(0,0)">すずき</div> <hr> <div onmouseover="changImg1(0,3)" onmouseout="changImg1(0,0)">さとう</div> （便宜上やまだ、すずき、さとうの間に<hr>入れましたが）スマートじゃないけどこんな風に全部に入れてはいかがですか？
お礼
すみません、違うところに２つの初歩的ミスがありました。おかげさまで解決しました。 (1) 既にあるコード(onmouseoverのところ)を横着してコピペしたため、 onmouseoutと書くべきところがonmouseoverのままになっていた (2) 画面を更新せず、古い（＝誤ったまま）のコードを何度も実行して首をかしげていた。 顛末以上です。すみません。取り急ぎ御礼申し上げます。
関連するQ&A
- HPを作成しています。オンマウスオーバーで…
初心者ですみません。 イラスト集のホームページを作成中です。 サムネイル画像にオンマウスオーバーで大きな画像を表示させるところまでは検索等してできたのですが、同時に「題名」（テキスト）を画像の下などに表示させたいのですが、２つの指示を同時に行う事は不可能でしょうか？そもそもが分かっていないのでヒントでも頂けると助かります。 ちなみに画像は ヘッダーに↓ if(navigator.appVersion.charAt(0)>=3) { movimg=new Array() movimg[0] = new Image();movimg[0].src='********.gif'; movimg[1] = new Image();movimg[1].src='******.gif'; movimg[2] = new Image();movimg[2].src='******.gif'; function changImg1(imgNoA,imgNoB) { if(navigator.appVersion.charAt(0)>=3){ document.images[imgNoA].src=movimg[imgNoB].src; }; }; ボディーに↓ <a href="javascript:function voi(){};voi()" onMouseOver="changImg1(1,1)"><img src="*****" width="50" border="0"></a> というふうにやっています。
- ベストアンサー
- JavaScript
- マウスオーバーで画像の入れ替え
以下のソースでマウスオーバー時に画像の入れ替えをしたいのですが、IE6では動作するのですが、firefoxでは動作しません。 firefoxでも動くようにするにはどうしたらいいですか？ アドバイスよろしくお願いいたします。 <html> <head> <script language="JavaScript"> <!-- // タイマー変数の初期化 timer = ""; // スワップイメージ function SwapImage(img) { obj = document.getElementById("image"); obj.src = img; clearTimeout(timer); timer=setTimeout('DefaultImage()',5000); } // イメージ画像の初期化 function DefaultImage() { obj = document.getElementById("image"); obj.src = 'img/default.gif'; clearTimeout(timer); } //--> </script> </head> <body> <div class="btn"><a href="#"><img src="img/sample1.jpg" onmouseover="SwapImage('img/test01.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample2.jpg" onmouseover="SwapImage('img/test02.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample3.jpg" onmouseover="SwapImage('img/test03.jpg')" width="100" height="50" border="0" /></a></div> <div id="photo"><img src="img/default.gif" name="image" width="300px" height="150px"></div> </body> </html>
- ベストアンサー
- JavaScript
- マウスオーバーで画像の切替でタイマーをつけるには？
<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
- マウスオーバー
マウスオーバーの制御で下記のソースなのですが、今まで、こちらを教えてもらってやっていました。 今のままだと、オーバーで画像が変わるだけでマウスが外れると、元の画像に戻ってしまいます。該当ページへジャンプしたときに画像が変わったままにするのにはどうしたらよいのでしょうか。 <script LANGUAGE="JavaScript"> <!-- if (document.images) { //if image object is available img1on = new Image(); // MouseOver Images img1on.src = "image/1.gif"; img2on = new Image(); img2on.src = "image/2.gif"; img1off = new Image(); // MouseOut Images img1off.src = "image/1_1.gif"; img2off = new Image(); img2off.src = "image/2_2.gif"; } function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); }} function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); }} //--> </script> ***HTML***** <a onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')" TARGET="_self" href="index.htm"> <img NAME="img1" image/1_1.gif" width="130" height="20"></a> <a onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')" href="next.htm"> <img NAME="img2" SRC="image/2_2.gif" width="130" height="20"></a>
- ベストアンサー
- JavaScript
- マウスオーバーで画像変更で
以下のような方法で画像変換を行っています。 <script language="JavaScript"> function imageChange(imageName,imageURL){ document.images[imageName].src = imageURL; } </script> <TR><TD><IMG SRC="./img/01.gif" NAME="image01" style="position:absolute;top:20;left:10;" onMouseOver="imageChange('image01','sub01_01b');"> </TD></TR> <IMG SRC="./img/01_01b.gif" name="sub01_01b"> 実際にマウスオーバーさせると×印が出てしまいます。 onMouseOver="this.src='./img/01_01b.gif'" とするとできるのですが。 どこかに間違いがあるのだと思うのですが、自分で発見できません（＞＜） 間違いを訂正してください！
- ベストアンサー
- JavaScript
- NETSCAPEで表示がうまくいかない
折りたたみメニューのようなのを作成してます。 IEだと問題なく動くのですが、 NETSCAPEになると、マウスオーバー・オフで ロールオーバーの画像が変わらなかったり 表示が消えるはずの箇所が残ったりします。 NETSCAPEでも、ちゃんと動く用にしたいです。 どなたかご助言を頂けないでしょうか？ ソースの中を抜粋しました <A href ="BOOK.html" onMouseOver="On('img10');" onMouseOut="Off('img10');"> <IMG src ="10-1.png" border="0" NAME = "img10" alt = ""> </A></DIV> <DIV class="Lmenu_Rmenu"> <A href ="CD.html" onMouseOver="On('img11');" onMouseOut="Off('img11');"> <IMG src ="11-1.png" border="0" NAME = "img11" alt = ""> </A></DIV> <DIV class="Lmenu_Rmenu"> <A href ="DVD.html" onMouseOver="On('img12');" onMouseOut="Off('img12');"> <IMG src ="12-1.png" border="0" NAME = "img12" alt = ""> </A></DIV> </DIV></div> <SCRIPT type="text/javascript" src="java.js"></SCRIPT> var img1on = new Image(); var img1off = new Image(); ・ ・ var img12on = new Image(); var img12off = new Image(); img1off.src = "1-1.png"; // 普段の画像 img1on.src = "1-2.png"; // ポイント時の画像 ・ ・ img12off.src = "12-1.png"; img12on.src = "12-2.png"; // ポイント時の処理 function On(name) { if (document.images) { document.images[name].src = eval(name + 'on.src'); } } // 放した時の処理 function Off(name) { if (document.images) { document.images[name].src = eval(name + 'off.src'); } }
- 締切済み
- JavaScript
- javascriptを使って画像のランダム表示とロールオーバーをセット
javascriptを使って画像のランダム表示とロールオーバーをセットで行いたいのですが上手くいきません… javascript超初心者です…。画像をランダムに表示し、さらにそのランダムに表示された画像をそれぞれ違った画像にロールオーバーさせたいのですが上手くいきません。 一応以下のように書いて試しているのですが、ランダム表示はするのですが、ロールオーバーはエラーがでてしまい画像が切り替わりません。どのようにすれば上手く出来るか、知恵を貸してください。宜しくお願いします。 <html> <body> <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する img = new Array(); onMouseover = new Array(); onMouseout = new Array(); // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "top1.gif"; img[1] = "top2.gif"; img[2] = "top3.gif"; img[3] = "top4.gif"; img[4] = "top6.gif"; // マウスオーバー onMouseover[0] = "top1roll.gif"; onMouseover[1] = "top2roll.gif"; onMouseover[2] = "top3roll.gif"; onMouseover[3] = "top4roll.gif"; onMouseover[4] = "top6roll.gif"; // マウスアウト onMouseout[0] = "top1.gif"; onMouseout[1] = "top2.gif"; onMouseout[2] = "top3.gif"; onMouseout[3] = "top4.gif"; onMouseout[4] = "top6.gif"; n = Math.floor(Math.random()*5); document.write("<img src='"+img[n]+"' border='0' onMouseover='"+onMouseover[n]+"' onMouseout='"+onMouseout[n]+"'>"); //--> </SCRIPT> </body> </html> 補足 ●ランダム用の画像が1～5まで、ロールオーバー用の画像がa～eまであるとして、ランダム表示によって1が表示されたらロールオーバーで表示される画像はaのみ、マウスアウトしたら１に戻る、というようにしたいです。同じように2-b,3-c…というように対応させたいです。 ●ページ読み込み時のみランダム用画像をランダム表示させ、後は上記のような流れにしたいです。 長くなりましたが、どなたか回答お願いいたします。
- 締切済み
- JavaScript
- CSSで背景画像マウスオーバー
スタイルシートのマウスオーバーについて質問です。 <div class="AAA"> <div style="margin-top: 22px;"><img src="http://xxxxx.gif"></div> </div> （css）ーーーーーーーーーーーーーーーーーーーーーーーー .AAA { background-image: url("http://xxxxx_back.gif") } 上記の状態で、「xxxxx.gif」の背景に「xxxxx_back.gif」を表示させるまでは 思い通りに出来たんですが、 背景表示はマウスオーバーの時だけにしたかったので、 <div class="BBB"> <div style="margin-top: 22px;"><img src="http://xxxxx.gif"></div> </div> （css）ーーーーーーーーーーーーーーーーーーーーーーーー .BBB a:hover { background-image: url("http://xxxxx_back.gif") } という風にしたんですが、 BBBにすると、オーバー時の表示は出来ましたが、背景画像がズレてしまいます。 AAAの時の表示位置は正確です。 AAAとBBBの違いは常時表示か、マウスオーバー表示かの違いしかないと思うのですが、 何故でしょうか。 ※safariで検証しました。 ※style="margin-top: 22px;"は都合上入れてます。
- ベストアンサー
- ブログ
- なぜ「ページでエラーが発生しました。」？
字数が限られているので、「なぜエラーなのですか？」 -----ここからhead区間 <!--JavaScript Function window.onerror = null; var ver4 = (navigator.appVersion.charAt(0) >= "4"); var NN4 = ver4 && (navigator.appName.charAt(0) == "N"); var IE4 = ver4 && (navigator.appName.charAt(0) == "M"); var NN3 = ((navigator.appVersion.charAt(0) == "3") && (navigator.appName.charAt(0) == "N")); if(NN3 || NN4 || IE4){ var img_b = new Array(); img_b[0] = new Image(); img_b[0].src = "kbw.jpg" img_b[1] = new Image(); img_b[1].src = "ao.jpg" img_b[2] = new Image(); img_b[2].src = "bcw.jpg" img_b[3] = new Image(); img_b[3].src = "sm.gif" } function B_in(nam,num){ if(NN3 || NN4 || IE4) document.images[nam].src = img_b[num].src; } function B_out(nam,num){ if(NN3 || NN4 || IE4) document.images[nam].src = img_b[num].src; return false; } // END ---> </SCRIPT> </head> -----ここからbody <BODY onLoad="time(0)"> <SCRIPT LANGUAGE="JavaScript"> <!--- ここから表示 document.write(TodayIMG(0)); //end ---> </SCRIPT>
- ベストアンサー
- JavaScript
- 画像 表示について質問です。
画像 表示について質問です。 <?php echo '<a href="A.php"><img src="img/advance.gif" wwidth="80" height="80" style="border-style:none;" onmouseover="this.src="img/returen2.gif";" onmouseout="this.src="img/returen.gif";" /></a>'; ?> と考えたのですが、画像は表示されるもののONマウスの時に画像が変化しません。 どうしてなのでしょうか。
- ベストアンサー
- PHP
お礼
すみません、違うところに２つの初歩的ミスがありました。おかげさまで解決しました。 (1) 既にあるコード(onmouseoverのところ)を横着してコピペしたため、 onmouseoutと書くべきところがonmouseoverのままになっていた (2) 画面を更新せず、古い（＝誤ったまま）のコードを何度も実行して首をかしげていた。 顛末以上です。すみません。取り急ぎ御礼申し上げます。