FirefoxでonMouseOver/Outの動作がされない？原因と解決方法を教えてください！
- 質問者はFirefoxでonMouseOver/Outの動作がされない問題に遭遇しています。
- 質問者は外部jsファイルからスクリプトを読み込ませるとFirefoxで動作しない問題に直面しています。
- 質問者はエラーコンソールで「syntax error」と表示されることを確認しましたが、問題の原因がわかりません。
- ベストアンサー
FirefoxでonMouseOver/Outの動作がされません。。。
全くの初心者で恐縮ですが、どうしても判らなかったので投稿させていただきます。 onMouseOver/Outで画像を変化させるごく一般的なスクリプトを使用したいのですが、外部jsファイルから読み込ませるとどうしてもFirefoxで動作されません。 IEでは動くようですが、IEの場合間違った記述でも動作してしまう事がある、との事…。 また、外部jsファイルに置かずhtmlの中にスクリプトを記載した場合はFirefoxでも問題なく動きました。 エラーコンソールで確認すると「syntax error」となっており、記述に間違いがあるのは確かなようなのですが、検索にかけてもそれらしいものにはヒットしませんでした。 以下、作成しているファイルからコピペです。 ◆jsファイル if (document.images) { var img1on = new Image(); img1on.src = "img/1on.jpg"; var img1off = new Image(); img1off.src = "img/1off.jpg"; } 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'); } } ◆htmlファイル ・<head>内に<script type="text/javascript" src="script.js"></script>を記載。 ・<body>内の該当リンク部分に下記の記載。 <a href="index.html" onMouseOver="On('img1')" onMouseOut="Off('img1')"><img src="img/1off.jpg" id="img1" /></a> 尚、スクリプトの内容はほぼこちら↓のサイト様の丸写し状態です。 http://www.tagindex.com/javascript/link/change1.html jsファイルのパスに間違いが無いか等、自分で考えられる事は全て確認してみたのですがどうしても判らず、どなたか詳しい方のお知恵を拝借出来ればと思います。 よろしくお願いいたします。
- natsu0321
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
うーん、ソースがめためたなので、これは抜本的に換えた方がよいのでは？ こんな感じ、リストを用意しておいて参照するというのでどうでしょう？ <script> var imglist={ img1:{on:'1.jpg',off:'2.jpg'} ,img2:{on:'1.jpg',off:'2.jpg'} ,img3:{on:'1.jpg',off:'2.jpg'} }; function change(obj,val){ var tags=obj.getElementsByTagName('img'); for(var i=0;i<tags.length;i++){ tags[i].src=imglist[tags[i].id][val]; } } </script> <a href="index.html" onMouseover="change(this,'off')" onMouseout="change(this,'on')"><img src="1.jpg" id="img1" /></a> <a href="index.html" onMouseover="change(this,'off')" onMouseout="change(this,'on')"><img src="1.jpg" id="img2" /></a> <a href="index.html" onMouseover="change(this,'off')" onMouseout="change(this,'on')"><img src="1.jpg" id="img3" /></a>
関連するQ&A
- 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
- 次のJSで同じ変数名
swichをを繰り返し書きたくないのですが C言語の#defineといったような機能はJSにはないのでしょうか? "off.jpg"も2箇所で使われていますがこれについてもメンテのために一箇所に指定のですがこちらも定義できるでしょうか? <script language="JavaScript"> var on=new Image(); var off=new Image(); on.src="on.jpg"; off.src="off.jpg"; function tooff(img) { if(img=="swich")document.images[img].src=off.src; } function toon(img) { if(img=="swich")document.images[img].src=on.src; } </script> <a href="gomi.htm" onmouseout="tooff('swich')" onmouseover="toon('swich')"> <img src="off.jpg" name="swich" width="99" height="99"/> </a>
- ベストアンサー
- JavaScript
- ｊａｖａでロールオーバー設定で教えてください
外部ファイルで同じ設定でロールオーバーを設定しているのですが ポイントを合わせると画像が動く（ボタンでよくある下にへこむような動作）ものと動かないものが出てきます。 ロールオーバー自体はできているのですがその動きの違いは何なのでしょうか？ できれば全て動くようにしたいのですが… ＜外部ファイル＞ if (document.images) { var img1on = new Image(); img1on.src = "img/c2.png"; var img1off = new Image(); img1off.src = "img/c1.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'); } } ＜html＞ <p> <a href="home.html" onMouseOver="On('img1')" onMouseOut="Off('img1')"><img src="img/c1.png" alt="ホームへ" name="img1" border="0"></a> </p> これ以上のことはしていません。（全て統一でこのタグの 画像の名前やリンク先しかいじっていません。） 今貼り付けたものはへこむ動作はせずにロールオーバーのみが可能なものです。 誰か教えていただけませんでしょうか？ またへこむような動作はどこで設定されているのでしょうか？ 色々調べてはいるのですが初心者なもので分かりません… 宜しくお願い致します。
- 締切済み
- JavaScript
- マウスオーバー・アウトの制御のソース
複数のボタンでマウスオーバー・アウトの制御のソースを教えてもらったのですが、質問いたします。 この場合、このボタンはオーバーとアウト、それぞれ同じ画像を使用しているのですが、その場合でも全部違ったファイル名をつけなければいけないのでしょうか？ 現在はそあしているのですが、何か無駄な気がして・・・。 よしくお願いします。 <SCRIPT LANGUAGE = "JavaScript"> <!-- if (document.images) { //if image object is available img1on = new Image(); // MouseOver Images img1on.src = "images/c1b.gif"; img2on = new Image(); img2on.src = "images/c2b.gif"; img3on = new Image(); img3on.src = "images/c3b.gif"; img1off = new Image(); // MouseOut Images img1off.src = "images/c1a.gif"; img2off = new Image(); img2off.src = "images/c2a.gif"; img3off = new Image(); img3off.src = "images/c3a.gif"; img4off = new Image(); } 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>
- ベストアンサー
- JavaScript
- ・JAVASCRIPTを使って、ホームページを作成しています。
・JAVASCRIPTを使って、ホームページを作成しています。 ・ JAVAを使って、ホームページを作成しています。 ・メニューのボタンに、マウスオーバーでボタンの画像を切り替える <!-- loadImage = new Image(); loadImage.src = "profile.gif"; // --> ・と同時に任意の画像を切り替える // ポイント時の処理 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を同時に使いたいのですが、どちらかだけになってしまったり、どちらも作動しません。 ・一つのボタンに２つのJAVAを使う場合何か特別な入力が必要なのでしょうか？ ・それとも、ただ単純にボタンのタグが誤っているのでしょうか？ ・どなたかご教授お願い致します。 ・ちなみにタグを全て載せると、 <SCRIPT Language="JavaScript"> <!-- loadImage = new Image(); loadImage.src = "bbs.gif"; // --> </SCRIPT> <script type="text/javascript"> <!-- if (document.images) { // 設定開始（使用する画像を設定してください） // 通常の画像 var img0 = new Image(); img0.src = "topic4.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "topic4.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> とボタンのタグが、 <A HREF="../usatop.html"onMouseOver="On('img2')" "if(document.images) "myImage.src='bbs2.gif'" "onMouseOut="Off()""if(document.images) "myImage.src='bbs.gif'"><IMG SRC="bbs.gif" BORDER="0" name="myImage"></A> ・となっております。 ・よろしくお願いします！
- ベストアンサー
- JavaScript
- ・JAVAを使って、ホームページを作成しています。
・JAVAを使って、ホームページを作成しています。 ・メニューのボタンに、マウスオーバーでボタンの画像を切り替える <!-- loadImage = new Image(); loadImage.src = "profile.gif"; // --> ・と同時に任意の画像を切り替える // ポイント時の処理 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を同時に使いたいのですが、どちらかだけになってしまったり、どちらも作動しません。 ・一つのボタンに２つのJAVAを使う場合何か特別な入力が必要なのでしょうか？ ・それとも、ただ単純にボタンのタグが誤っているのでしょうか？ ・どなたかご教授お願い致します。 ・ちなみにタグを全て載せると、 <SCRIPT Language="JavaScript"> <!-- loadImage = new Image(); loadImage.src = "bbs.gif"; // --> </SCRIPT> <script type="text/javascript"> <!-- if (document.images) { // 設定開始（使用する画像を設定してください） // 通常の画像 var img0 = new Image(); img0.src = "topic4.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "topic4.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> とボタンのタグが、 <A HREF="../usatop.html"onMouseOver="On('img2')" "if(document.images) "myImage.src='bbs2.gif'" "onMouseOut="Off()""if(document.images) "myImage.src='bbs.gif'"><IMG SRC="bbs.gif" BORDER="0" name="myImage"></A> ・となっております。 ・よろしくお願いします！
- ベストアンサー
- Java
- 関数の重複で動かない？
ブログのサイドバーに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
- オンマウスで画像表示する外部スクリプトを呼び出したいのですが
お知恵をお貸し下さい。よろしくお願い致します。 「画像Aを表示」→「オンマウスで画像Bを表示」という効果を、 外部スクリプトを使ってやってみたいと思っています。 ただ外部スクリプトを読み込む時の指定方法がわかりません。 ちなみに、以下のスクリプトを外部に分けず、 <head>～</head>内に書いた時はきちんと動いておりました。 ※外部スクリプトの記述（sample.js） <SCRIPT TYPE="text/javascript"> <!-- if (document.images) { // 設定開始 // 通常の画像 var img0 = new Image(); img0.src = "sample/sample.jpg"; // ポイント時の画像01 var img01 = new Image(); img01.src = "sample/crip/01/01.jpg"; ： ：（このあと02～03と画像が増える予定） ： // 設定終了 } // ポイント時の処理 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> ========================================= ※読み込む先の記述（sample.jsは指定してあります） <a href="index.html" onMouseOver="On('img01')" onMouseOut="Off()"> <FONT SIZE="2" COLOR="indigo">【1】</font></a> 【1】の文字にマウスを持っていくと、違う場所に表示してある 画像Aが画像Bに変わるようにしたいのです。 オンマウスオーバーの指定がよくないのかと思うのですが 具体的にどこをどうしたらいいか、よろしくお願い致します。
- 締切済み
- JavaScript
- JavaScriptロールオーバーで画像が変わりません
<SCRIPT TYPE="text/javascript"> <!-- if (document.images) { var imgtopon = new Image(); imgtopon.src = "images/menu/topon.jpg"; // ポイント時の画像 var imgtopoff = new Image(); imgtopoff.src = "images/menu/topoff.jpg"; // 通常の画像 } // ポイント時の処理 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'); } } // --> </SCRIPT> </head> <body> <div id="headwrapper"> </div> <div id="wrapper"> <div id="header"> <h1>～</h1> </div> <div id="pagebody"> <A HREF="～" onMouseOver="On('imgtop')" onMouseOut="Off('imgtop')"><IMG SRC="images/menu/topoff.jpg" ALT="sample1" BORDER="0" WIDTH="102" HEIGHT="54" NAME="imgtop"></A> ↑↑↑終了 ポイントしていないときの画像は表示されますが、ロールオーバーしてもそのままの状態です。 宜しくお願いします。
- 締切済み
- JavaScript
- ロールオーバーの外部ファイル化
オンマウスにすると画像変化し、マウスを離すと元に戻る設定にしたいです。 複数の画像をロールオーバーさせたい場合、今までは外部ファイルに ↓↓ 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
お礼
yambejpさま、ご回答有り難うございます。 レスが遅れまして申し訳ございません。 ソース、めためたでしたか…お恥ずかしい限りです。 いただいたスクリプト、そのまま使用してみたらすんなり動きました！ まだ構文の使い方が全く理解出来ておりませんでしたので、forなどを使う方法に少々抵抗があったのですが…やはり勉強しないといけませんね。 これを機にきちんと勉強するよう致します。。。 こんなレベルの低い質問にご丁寧にお答えいただきまして、感謝です。 本当に有り難うございました。