Fire Foxで画像が変わらない問題の解決方法
- Fire Foxで画像が変わらない問題が発生しています。HTMLとCSSを使用して画像内の特定のエリアにマウスオーバーした際に画像が変わる機能を実装していますが、Fire Foxではうまく動作しません。他のブラウザでは正常動作しているようです。
- 質問者はJavaScriptとHTMLの初心者であり、問題の原因が特定できていません。質問文には該当するコードも掲載されていますが、問題の箇所が見つけられませんでした。質問者はFire Fox以外のブラウザとOSでも正常動作していることを報告しています。
- この問題の解決策や他に代替策があるかどうかを質問者は知りたいとしています。任意の画像エリアにマウスオーバーした際に画像を変更する機能は、ユーザーにとって便利な機能であり、Fire Foxでも正常に動作することが求められます。
- ベストアンサー
Fire Foxで作動しないscriptがあります
Fire Foxで作動しないscriptがあります やりたいこととしては画像にエリア指定をして、そのエリアにマウスオーバーすると画像が変わることをやりたいでのす。 html cssで作成しております 問題あると思われるコードは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>****</title> </head> <script>function over(num){ mg.src="site02/ex/ex_top03"+num+".jpg" } function out(){ mg.src="site02/ex/ex_top03.jpg" } </script> <body> <div id="wrapper"> <div id="main_content_ex"> <img id="mg" src="site02/ex/ex_top03.jpg" usemap="#hisigata" border="0"> <map name ="hisigata"> <area shape="rect" coords="10,498,149,532" onmouseover="over(1) onmouseout="out()"> </map> </div> </div> </body> </html> javascript初心者でHTMLも初心者です 手元のマックOS10.4 FireFox3.6.3（mac）オーバーせず、 Safari4.1（mac）だとオーバーします。 WinのIEも大丈夫でした。 FireFoxのみ動作してくれません。 問題はどこにあるのでしょうか？ また他に策などがありますでしょうか？ 大変ぶしつけな質問の仕方で申し訳ないのですが、大変困っています。 ご教授願えればと思います よろしくお願いします!!
- motomm
- お礼率75% (3/4)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
せっかく<img>にid振ってるんだから、 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>****</title> <script type="text/javascript"> function over(num){ document.getElementById("mg").src="site02/ex/ex_top03"+num+".jpg"; } function out(){ document.getElementById("mg").src="site02/ex/ex_top03.jpg"; } </script> </head> とすれば
関連するQ&A
- 画像にエリア指定をしてマウスオーバーすると画像が変わり、さらにそのマウ
画像にエリア指定をしてマウスオーバーすると画像が変わり、さらにそのマウスオーバーがフェードで切り替わるということはできないでしょうか？ 画像にエリア指定をしてマウスオーバーすると画像が変わるということはできたのですが その画像の切り替えをフェードでできないでしょうか 問題のコードです <script>function over(num){ document.getElementById("mg").src="site02/ex/ex_top03"+num+".jpg" } function out(){ document.getElementById("mg").src="site02/ex/ex_top03.jpg" } </script> <div id="main_content_ex"> <img id="mg" src="site02/ex/ex_top03.jpg" usemap="#hisigata" border="0" /> <map name ="hisigata"> <area shape="rect" coords="10,498,149,532" href="site02/lightbox/ex.htm" onmouseover="over(1)" onmouseout="out()"> <area shape="rect" coords="582,468,790,496" onmouseover="over(2)" onmouseout="out()"> <area shape="rect" coords="800,465,932,493" onmouseover="over(3)" onmouseout="out()"></div> jQueryなどのフェードのエフェクトを使用しようかとも思ったのですが、javascriptでmouseOverの画像を指定しているためどう書いていいかわからなくなってしまいました こういう質問のしかたで大変恐縮なのですが 誰かご教授願えないでしょうか？？ scriptもjQueryも基本を理解できておらず、大変困っています。 大変申し訳ありませんが、お願いいたします。
- ベストアンサー
- JavaScript
- 以下のタグはクリックすると画像が切り替わり、新しいウィンドウでgooト
以下のタグはクリックすると画像が切り替わり、新しいウィンドウでgooトップへリンクするjavascriptです。 はじめて作ったタグなので無駄なところを教えてください また、同じウィンドウで開くにはどこをいじったらよいですか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><title>web page title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="ja"> <script type="text/javascript"> function change(){ document.getElementById("pic").src="2.jpg"; window.open("http://www.goo.ne.jp/");} </script></head> <body> <a href="javascript:change();"><img id="pic" src="1.jpg" alt="gooへリンク"></a> </body></html>
- ベストアンサー
- JavaScript
- jqueryを使ったスクロール画面が正しく作動しません。
jqueryを使ったスクロール画面が正しく作動しません。 HTMLに関する質問コーナーにはふさわしくない質問かもしれませんが、jquery.jstocktickerを使ったスクロール画面に関して教えて欲しいことがあります。 以下のようなものを書いてみました。しかし、スクロールされるべき文字（この場合は「テスト」）が右からでてきません。左端に現われてすぐに消えてゆきます（一様左にスクロールされながら消えるのですが）。 どこが間違っているのかをご指摘していただければと思い、投稿させていただきました。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>スクロール</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jstockticker-1.1.js"></script> <link href="jQuery/innerFade/css/reset.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/fonts.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/jq_fade.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() {$("#ticker").jStockTicker({interval: 5});}); </script> <style type="text/css"> div#tickercontainer{width: 680px;margin-left:auto;margin-right:auto;position:relative} div#wrap{position:relative;padding:5px; overflow: hidden} div#ticker{position:relative} div#ticker span{padding-right:20px} </style> </head> <body> <div id="tickercontainer"> <div id="wrap"> <div id="ticker"> <span> テスト</span> </div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- スクリプトエラーについて
メールフォームをmailformpro2というフリーのものをつかって、自分なりにホームページビルダーでカスタマイズしているのですが、最終的にプレビューしてみるとスクリプトエラーが出てしまいます。 エラーはこのようなものです。 ライン ２ 文字 １ エラー 文字が正しくありません。 コード ０ ２行目の一文字目ということだと思うのですが、何が原因かわかりません。 それともうひとつ、「お問い合わせ」というタイトルにしているのですが、これも原因がわからないのですが、プレビューをしてみると問い合わせの後に入力していない文字が出て「問い合わせ３．０．０」が表示されます。 これもスクリプトエラーが原因なのでしょうか？ 以下が、その部分を含んでいると思われるＨＴＭＬです。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>お問い合わせ</title> <meta name="revisit_after" content="7 days" /> <meta name="robots" content="ALL" /> <meta http-equiv="pragma" content="no-cache" /> <link rel="index" href="index.html" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="commons/_include_wide.css" type="text/css" /> <meta name="Description" content="お問い合わせ" /> <!--[メールフォームプロ・参照ファイルここから]--> <link rel="stylesheet" href="commons/mailform.css" type="text/css" /> <script type="text/javascript" src="commons/jquery.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mfp.lang.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mfp.extensions.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mailform.js" charset="UTF-8"></script> <script type="text/javascript" src="postcodes/get.cgi?js" charset="UTF-8"></script> <!--[メールフォームプロ・参照ファイルここまで]--> </head> <body> <div id="wrapper"> <div id="header"> <h1 id="title">お問い合わせ <script type="text/javascript" src="commons/mfp.version.js"></script></h1> <div>お電話でのお問い合せは ***-***-**** (月曜日～金曜日／午前9時～午後6時)までお問い合わせください。</div> </div>
- 締切済み
- ホームページ作成ソフト
- crossSlideがうまく機能しないです；
簡単な画像切り替えのプラグインとして、 crossSlideを見つけたので使用してみようとしたんですが、 全く何も表示されない状態で困っています。 下記のようにソースは記載しています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="ja" /> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link href="css/base.css" rel="stylesheet" type="text/css"> <link href="css/index.css" rel="stylesheet" type="text/css"> <script type='text/javascript' src='js/jquery-1.9.1.min.js'></script> <script type='text/javascript' src='js/jquery.cross-slide.js'></script> <script type="text/javascript"> $(function(){ $('#mainvisual').crossSlide({ sleep: 1, fade: 1 },[ { src: 'images/01.jpg' }, { src: 'images/02.jpg' }, { src: 'images/03.jpg' } ]); }); </script> </head> <body> <p>タイトル</p> <div id="mainvisual"> <p>写真</p> </div> </body> </html> cssは何も指定していません。 jsフォルダに、jquery-1.9.1.min.jsファイル、jquery.cross-slide.jsファイルを入れています。 imagesフォルダには、01.jpg、02.jpg、03.jpgを入れてます。 ブラウザには <p>タイトル</p> は表示されるのですが、 div#mainvisualの中の <p>写真</p>の文字は表示されません。 何が原因なのでしょうか。 よければアドバイスの方よろしくお願いします。
- ベストアンサー
- JavaScript
- ＪＳの記述を別ファイルに移す
下記のＨＴＭＬ内の <script type="text/javascript">～</script> をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>
- ベストアンサー
- JavaScript
- FIRE FOXで動かないJAVA SCRIPT
ieやChromeでは正常に動くのですがFIRE FOXのみ正しく動作してくれません。 どこが間違っているのか教えてください。 FIREFOXでは1～5の画像は順に動いてくれるのですがサムネイルをクリックしても反応がおきません。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script> <script src="javascripts/jquery.megamenu.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(function(){ var SelfLocation = window.location.href.split('?'); switch (SelfLocation[1]) { case "justify_right": jQuery(".megamenu").megamenu({ 'justify':'right' }); break; case "justify_left": default: jQuery(".megamenu").megamenu(); } }); /* 表示させたい画像へのパスをカンマで区切って記述する */ var gazo = new Array( "http://画像1.jpg", "http://画像2.jpg", "http://画像3.jpg", "http://画像4.jpg", "http://画像5.jpg" ); /* 表示させたい画像の順番に合わせてリンク先のパスをカンマで区切って記述する */ var link = new Array( "http://リンク1", "http://リンク2", "http://リンク3", "http://リンク4", "http://リンク5" ); var timer; var x = 0; function show(num) { clearTimeout(timer); /* サムネイル画像がクリックされた時はxの数値を変更します */ if (num != 999) { x = num; } /* id名がancのaタグのリンクを変更します */ document.getElementById('anc').setAttribute('href', link[x]); /* id名がmainphotoの中になるimgタグの画像を変更します */ $("#mainphoto img").before("<img src='"+gazo[x]+"' alt=''>"); /* fadeOutの速度は、slow、normal、fast、もしくは完了までの時間をミリ秒単位で指定します。*/ $("#mainphoto img:last").fadeOut("normal",function(){ $(this).remove() }); /* 何枚目の画像を表示するか設定します。 変数xで何枚目かを管理します。show()が実行される度にxの値を1加算します。 gazo.lengthでgazo配列の要素の数が分かります。 画像は0番目から数えるので「スライドする画像の数 - 1」の値になれば0に戻します */ if ( x == gazo.length - 1 ) /* 「スライドする画像の枚数 - 1 」の値を設定 */ { x = 0; /* 画像の番号を0(1枚目)に戻す */ } else { x = x + 1; /* 画像の番号を1つ進める */ } /* 「setTimeout("show()", 3000)」の3000でスライドする時間を変更します。 3000は3秒です。*/ timer = setTimeout("show(999)", 3000); }; </script> html部分↓ <p id="mainphoto"> <a href="リンク1"><img src="画像1" width="950" height="300" /></a> </p> <table width="950px"> <tr> <td width="20%" align="center"> <a href="JavaScript:show(0)"><img src="画像1" width="180"></a> </td> <td width="20%" align="center"> <a href="JavaScript:show(1)"><img src="画像2" width="180"></a> </td> <td width="20%" align="center"> <a href="JavaScript:show(2)"><img src="画像3" width="180"></a> </td> <td width="20%" align="center"> <a href="JavaScript:show(3)"><img src="画像4" width="180"></a> </td> <td width="20%" align="center"> <a href="JavaScript:show(4)"><img src="画像5" width="180"></a> </td> </tr> </table>
- ベストアンサー
- JavaScript
- Firefoxで下の隙間が開く
http://oshiete1.goo.ne.jp/qa4870757.html この質問の続きですが、 Firefoxで下の隙間があきます。IEでは隙間が無いです。Firefoxで一番下までスクロールしても下の隙間を無くす方法をお願いします。 ********************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 上のDTDで隙間が開く 下のDTDなら開かない <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> scriptは、xrea.comの見本です。 scriptは一番下に置きたいのです。 下記例のHTMLは単純な例です。 ********************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>最終行の表示テスト</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"><!-- *{margin:0 50px;} #body{border-left:1px solid red; border-right:1px solid blue; background-color: #EEE;} --></style> </head> <body> <div id="body"> <p style="padding-top: 800px;">最終行</p> </div> <script type="text/javascript"><!-- var ID="100000000-INDEX"; var AD=1; var FRAME=0; // --></script> <script src="http://j1.ax.xrea.com/l.j?id=100000000-INDEX" type="text/javascript"></script> <noscript> <a href="http://w1.ax.xrea.com/c.f?id=100000000-INDEX" target="_blank"><img src="http://w1.ax.xrea.com/l.f?id=100000000-INDEX&url=X" alt="AX" border="0"></a> </noscript> </body> </html>
- ベストアンサー
- HTML
- IE8.0表示について
IE8.0で現在作成済みのWEBの動作確認を行っているのですが、5回に1回ぐらいあるイメージが表示されなくなったり、スタイルが崩れたりすることが判明し、最小構成にてチェックを行っているのですが、やはり同じ状態です。しかし、ページをリロードすると直ります。 どなたかアドバイスいただけませんでしょうか。 ちなみにmetaやHTTPヘッダの操作ではなくWeb標準準拠モードで表示させたいと思っています。 よろしくお願い致します。 サンプル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-language" content="ja"> <title>ダミーテキスト</title> <script type="text/javascript" src="/public/test.js"></script> </head> <body id="TOP_POINT"> <div> <!-- ▽ヘッダーロゴ▽ --> <div><img src="/public/img/logo.gif" width="150" height="55" alt="ロゴ"></div> <!--△ヘッダーロゴ△--> <!-- ▽ヘッダーお問い合わせ▽ --> <div><a href="問い合わせアドレス"><img src="/public/img/contact1.gif" alt="お問い合わせ" width="80" height="10"></a></div> <!-- △ヘッダーお問い合わせ△ --> </div> <p>ダミーテキスト</p> </body> </html>
- ベストアンサー
- HTML
- フレーム間のロールオーバーでエラーがでます。
いつも参考にさせてもらってます。 上下のフレームで、上のボタンから下の画像を変えるロールオーバーですが 画像まではどうにか変えられたのですが、リンクでスクリプトエラーが出てしまいます。 初心者でコピーして継ぎはぎしてるのでさっぱりです。 よろしくお願いします。 上のフレーム <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-language" content="ja"> <META http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows"> <title></title> <script type="text/javascript"> <!-- img_name=new Array(); img_name[0] = "bu05-12.gif"; img_name[1] = "bu05-13.gif"; img_name[2] = "bu05-14.gif"; img_name2 = "bu05-10.gif"; img1 = new Array(); img2 = new Image(); img2.src = img_name2; for(i=0; i<img_name.length; i++) { img1[i] = new Image(); img1[i].src = img_name[i]; } function mouse_over(which) { parent.bottom.document.images["swapImg"].src=img1[which].src; } function mouse_out(which) { parent.bottom.document.images["swapImg"].src=img2.src; } //--> </script> </head> <body> <DIV id="cont"> <div id="gnavi"> <A href="*"> <IMG src="bullet007.gif" onmouseover="this.src='b014lis.gif'" onmouseout="this.src='bullet007.gif'"></A> <A onmouseover="mouse_over(0)" onmouseout="mouse_out(0)" target="bottom" href="bottom-3.htm"> <IMG src="bullet008.gif" onmouseover="this.src='b014lis.gif'" onmouseout="this.src='bullet008.gif'"></A> <A onmouseover="mouse_over(1)" onmouseout="mouse_out(1)" target="bottom" href="bottom-3.htm"> <IMG src="bullet009.gif" onmouseover="this.src='b014lis.gif'" onmouseout="this.src='bullet009.gif'" ></A> <A onmouseover="mouse_over(2)" onmouseout="mouse_out(2)" target="bottom" href="bottom-3.htm"> <IMG src="bullet007.gif" onmouseover="this.src='b014lis.gif'" onmouseout="this.src='bullet007.gif'" ></A> </div> </DIV> </body> </html> 下のフレーム <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-language" content="ja"> <META http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows"> <title></title> </head> <body> <div id="visual"> <IMG src="bu05-10.gif" name="swapImg"> </div> </body> </html>
- ベストアンサー
- JavaScript
お礼
ありがとうございます FireFoxでも作動しました 助かりました！ありがとうございます！！