- ベストアンサー
JavaScriptでマウスオーバー時に画像切り替えする方法
- JavaScriptを使用して、マウスポインターをオーバーすると画像が切り替わる機能を実装しました。
- 実装した機能では、マウスポインターをオーバーすると別の大きな画像に切り替わります。
- しかし、実際に画像を表示しようとすると何も表示されない問題が発生しています。画像はすべてアップロードされています。
- yoal
- お礼率31% (14/45)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- x_jouet_x
- ベストアンサー率68% (162/236)
> HTML部分を変えましたが、依然として、JavaScript部分の画像は×印のまま表示されないです・・・ このHTMLファイルが置いてあるフォルダの中のimageフォルダに画像ファイルを置いていますか？ <img src="xxx.jpg"> <img src="image/xxx.jpg"> が混在しているのが少々気になるのですが…。
お礼
私の場合、フォルダは、下の画像のようになっているのですが、 http://blogimg.goo.ne.jp/user_image/15/45/77fa21bb1ec4e76745bd36a14622293a.jpg （素材というフォルダに全て画像が入っています） フォルダ名に問題がある、ということでしょうかね？ <img src="xxx.jpg">と<img src="image/xxx.jpg">の違いっていうのは、 <img src="xxx.jpg">が普通の画像で、 <img src="image/xxx.jpg">とするとJavaScriptに対応する部分になるのかな、 と思っていたのですが・・・ http://blogimg.goo.ne.jp/user_image/79/0b/25eb50934ae5ad16f4328a67f96ac256.jpg
補足
今色々試してみたところ、表示されなかったのはjpgとJPGの違いが原因だったようです。 解決しました。 ありがとうございました。
関連するQ&A
- オンマウスでの拡大画像の位置指定
サムネイル画像にオンマウスした時の拡大画像の位置指定がよくわかりません。今の状態だとマウスを乗せた時に拡大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。できたら、拡大画像をサムネイル画像かぶらせず、左側に表示させたいのですがどう指定したらよいのでしょうか？ついでに拡大画像を右側、上、下に指定したい時の表示方法もあわせてアドバイスいただけたらありがたいです。 それと、サムネイル画像の下にちょっとしたコメントを記載したい時はどうしたら良いのでしょうか？どうかよろしくお願いします。 <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
- ロールオーバーの外部ファイル化
オンマウスにすると画像変化し、マウスを離すと元に戻る設定にしたいです。 複数の画像をロールオーバーさせたい場合、今までは外部ファイルに ↓↓ if (document.images) { // section on // test1 var test1on = new Image(); test1on.src = "img/test-02-02.jpg"; var test1off = new Image(); test1off.src = "img/test-01.jpg"; // test3 var test3on = new Image(); test3on.src = "img/test-03-03.jpg"; var test3off = new Image(); test3off.src = "img/testl-03.jpg"; // section off } // point section function On(id) { if (document.images) { document.images[id].src = eval(id + 'on.src'); } } // out section function Off(id) { if (document.images) { document.images[id].src = eval(id + 'off.src'); } } の様な記述をし、 <a href="1.html" onmouseover="On('test1')" onmouseout="Off('test1')"><img src="img/test-01.jpg" alt="img" id="test1" /></a> <a href="3.html" onmouseover="On('test3')" onmouseout="Off('test3')"><img src="img/test-03.jpg" alt="img" id="test3" /></a> として表示させていたのですが、今回<a href～ を使わないで<img～のみで構築したいのです。加えて、<img～の記述を上記の様にhtml内に長く書くのでなく、出来るだけシンプルにしたいのですが、どの様な改善を加えればよろしいのでしょうか。 分かりにくい説明ですが、ご理解ご指導の程よろしくおねがいします。
- ベストアンサー
- 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
- 関数の重複で動かない？
ブログのサイドバーにjavascriptを使ってるのですが同じものを2個貼り付けたら古い方が動かなくなってしまいました。 関数の重複かも、というとところまではなんとなくわかったのですがどこをどうすれば動くようになるでしょうか？ ---------------------------------------- <HTML> <HEAD> <TITLE>TAG index Webサイト</TITLE> <SCRIPT TYPE="text/javascript"> <!-- if (document.images) { // 設定開始（使用する画像を設定してください） // 通常の画像 var img0 = new Image(); img0.src = "image/start.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "image/newyork.jpg"; // ポイント時の画像2 var img2 = new Image(); img2.src = "image/london.jpg"; // ポイント時の画像3 var img3 = new Image(); img3.src = "image/yokohama.jpg"; // 設定終了 } // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> </SCRIPT> </HEAD> <BODY> <IMG SRC="image/start.jpg" ALT="START" WIDTH="150" HEIGHT="100" NAME="def"> <BR> <A HREF="change3.html" onMouseOver="On('img1')" onMouseOut="Off()">NEW YORK</A> ｜ <A HREF="change3.html" onMouseOver="On('img2')" onMouseOut="Off()">LONDON</A> ｜ <A HREF="change3.html" onMouseOver="On('img3')" onMouseOut="Off()">YOKOHAMA</A> </BODY> </HTML> ----------------------------------------------
- 締切済み
- JavaScript
- マウスオーバーで複数の画像を非表示
マウスオーバーで画像を非表示にしています。 以下の例で、複数の画像を非表示にするにはどうすればよいでしょうか？ 例では画像はjpeg1.jpg～jpeg3.jpgの３つですが、実際には個数は毎日変化します。 <a>タグに画像の個数分のonMouseOverを書けばよいのでしょうが、もっと簡単に書く方法はないでしょうか。 PerlからHTMLを吐き出します。 <html> <a href="Javascript:" onMouseOver="jpeg1.style.display='none';" onMouseOut="jpeg1.style.display='';">非表示</a><br> <img src="./jpeg1.jpg" name="jpeg1"><br> <img src="./jpeg2.jpg" name="jpeg2"><br> <img src="./jpeg3.jpg" name="jpeg3"><br> </html>
- ベストアンサー
- JavaScript
- ランダム画像＆マウスオーバーで画像切り替え
こんばんは。 下記内容を外部JSファイルにしたいのですがやり方がいまいちわかりません。 <script language="javascript"> <!-- //ランダムにgazouを表示 img = new Array(); img[0] = "gazou1.jpg"; img[1] = "gazou2.jpg"; img[2] = "gazou3.jpg"; img[3] = "gazou4.jpg"; img[4] = "gazou5.jpg"; img[5] = "gazou6.jpg"; n = Math.floor(Math.random()*3); m = n+3; document.write("<img src='"+img[n]+"' border='0' onmouseover=src='"+img[m]+"' onmouseout=src='"+img[n]+"'>"); //--> </script> どなたかご教授頂けると助かります。 よろしくおねがいいたします。
- ベストアンサー
- 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"> <!-- //ランダムにgazouを表示 img = new Array(); img[0] = "gazou1.jpg"; img[1] = "gazou2.jpg"; img[2] = "gazou3.jpg"; img[3] = "gazou4.jpg"; img[4] = "gazou5.jpg"; img[5] = "gazou6.jpg"; n = Math.floor(Math.random()*3); m = n+3; document.write("<img src='"+img[n]+"' border='0' onmouseover=src='"+img[m]+"' onmouseout=src='"+img[n]+"'>"); //--> </script> さらにマウスオーバー時の画像それぞれ個別にリンクを張り さらにそれをインラインフレーム内で表示するのでtarget="_top"の値を付け加えたいです。 そのような事が可能であれば是非ご教授頂ければありがたいです。 みなさま、よろしくお願い致します。
- ベストアンサー
- JavaScript
- 縮小画像をマウスオーバーで画像を切り替えるjavaスクリプトで
テーブルを４分割し左下に小さい画像、右上に大きい画像。でその小さい画像をマウスでロールオーバーした際に右上の大きい画像が変わるjavaスクリプトについてなんですが, ４分割（上記）のテーブルを一つ作成した所すんなり画像はかわり、思い通りで来たのですがもう一つすぐ下に同じようにしたら両方ともが変わらなくなりました。 ヘッド内のスクリプトは Images[1] = new Image(); Images[1].src = "画像url"; Images[2] = new Image(); Images[2].src = "画像url"; 画像に onMouseOver="change_image(1)" onMouseOut="change_image(2)" です。 ２個目のテーブルは Images[1] = new Image(); Images[1].src = "画像url"; Images[2] = new Image(); Images[2].src = "画像url"; この下に Images[3] = new Image(); Images[3].src = "画像url"; Images[4] = new Image(); Images[4].src = "画像url"; とし 画像には onMouseOver="change_image(3)" onMouseOut="change_image(4)" としました。 当方javaがほとんど分からない度素人なのです。 どなたか、よろしくお願いします。
- ベストアンサー
- 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
- 磯山さやかさんのペットの犬を持ち出す行為には問題があります。
- 犬は飼い主によって信頼し、愛されています。
- このような行為は犬や飼い主にとって精神的なストレスを与える可能性があります。
お礼
回答ありがとうございます。 HTML部分を変えましたが、依然として、JavaScript部分の画像は×印のまま表示されないです・・・