• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:FIRE FOXで動かないJAVA SCRIPT)

FIRE FOXで動かないJAVA SCRIPT

このQ&Aのポイント
  • FIRE FOXで正常に動作しないJAVA SCRIPTの問題を解決する方法を教えてください。
  • FIREFOXでは画像が順に動くが、サムネイルをクリックしても反応しない問題の原因と解決策を教えてください。
  • FIRE FOXのみで発生するJAVA SCRIPTのエラーについて教えてください。

質問者が選んだベストアンサー

  • ベストアンサー
  • tracer
  • ベストアンサー率41% (255/621)
回答No.1

修正することもできるかと思いますが、素直にプラグインを他のものに変えてみてはどうでしょう? いくらなんでもこのソースは古すぎます。 ブラウザが進化した分、ソースも進化させないとついてこないですよ。

itsutsuba
質問者

お礼

ありがとうございます。 新しいプラグインを探してみたいと思います。 プラグインも更新しないとダメなのですね。 大変勉強になりました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • スライドショー

    初めまして、ちゃりおと申します。 JavaScript初心者です。 あるページに静止画(.jpg)が3枚あって、それらをクリックするとアニメGIFにきりかわってスライドショーが始まる、という簡単なスクリプトをつくってみました。 ただ、これだと静止画の数が増えた場合に保守効率が悪くなってしまいます。JavaScriptを使うにしても、同じ機能を実現するためにもっとスマートな方法はないものでしょうか? 諸先輩方、お知恵をおかしください。 //スクリプトここから <html> <head> <title>slideshow</title> <script language="javascript"> <!-- function autoslide_aisa(){ document.n_aisa.src = "img/aisa_anime.gif"; } function autoslide_ann(){ document.n_ann.src = "img/ann_anime.gif"; } function autoslide_mipori(){ document.n_mipori.src = "img/mipori_anime.gif"; } // --> </script> </head> <body BGCOLOR="#FFFFFF"> <table border="0" cellpadding="0" cellspacing="0" width="80%" align="center"> <tr> <td align="center" valign="bottom"> <a href="javascript:autoslide_aisa()"><img src="img/aisa1.jpg" name="n_aisa" border="0" align="bottom"> </a> </td> <td align="center"> <a href="javascript:autoslide_ann()"><img src="img/ann1.jpg" name="n_ann" border="0"> </a> </td> <td align="center"> <a href="javascript:autoslide_mipori()"><img src="img/mipori1.jpg" name="n_mipori" border="0"> </a> </td> </tr> </table> </body> </html> //スクリプトここまで

  • jQueryで画像にリンクを張りたい

    HTMLページに <img src="1.jpg" width="50" height="50" id="tes"> というタグがあるのですが、 ページが読み込まれたときに、 そのタグにaタグをつけて <a href="hoge.html" target="_blank"><img src="1.jpg" width="50" height="50" id="tes"></a> とリンクを張りたいのですが以下のような スクリプトを書いてみたのですが、 できません。 <script type="text/javascript"> $(function(){ $('<img />').append($('<a />',{ href:"hoge.html", target:"_blank" }) ) }); </script> jQueryがよくわかっていないのでめちゃくちゃなのだと思いますが、 そもそもこのように画像にaタグをつけることは可能なのでしょうか。 jQueryのバージョンは1.2.6を使っていますが、 新しいバージョンでも構いません。 よろしくお願いします。

  • 二つのJava Scriptを使うと動かない

    現在ウェブサイトを制作中ですがJavascriptについては配布されている物を設置すること位しかできません。 ウェブサイトの特徴として、横スクロールサイトであり、どうしてもギャラリーを設置したいのです。 横スクロールの為に <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript"> $(function() { $('ul.nav a').bind('click',function(event){ var $anchor = $(this); $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1500,'easeInOutExpo'); //easeInOutExpoはeasingプラグインから選べます event.preventDefault(); }); }); </script> とし、 マウスの上下スクロールで左右の動きをさせるために <script type="text/javascript" src="vscroll.js"></script> を置いてました。 この時点で動作は正常だったのですが、 ギャラリーが必要なため、lightbox <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> を置くと横スクロールとlightboxの動きができなくなり、レイアウトも崩れました。 どなたか詳しい方がいらっしゃいましたら、ご教授いただけませんでしょうか。 またlightboxにはこだわらないので、横スクロールサイトでギャラリーを設置できる方法がありましたら、教えてください。 ちなみにCSSでモーダルウィンドウを設置してみたのですが、横スクロールということもあり、Firefoxで正常に見る事ができませんでした。(サムネイル画像をクリックすると一番左に戻る) よろしくお願いします

  • table内の画像を中央寄せ、のせると拡大、方法?

    画像にマウスポインタをのせると画像が拡大される機能を備えた 画像の表を作りたいです。 テーブルの各セルに入る画像の配置を縦横両方中央揃えにしたいです。 CSSのマージンで調整しましたが、セルによって微妙に配置がずれてしまいました。 あと、画像は拡大されるのですが、拡大されていない画像が前面に出てきてしまいます。 各セルの画像の縦横中央揃え、画像が正しく拡大される方法を教えて下さい。 下記は自分が入力したHTMLとCSSです。それをFirefoxで表示したものを添付しました。 アドバイスをお願いいたします。 ~~~ HTML ~~~ <link rel="stylesheet"type="text/css" href="a.css"> <table border="1" width="500" cellpadding="5" bordercolor="#333333" /> <tr> <th bgcolor="#FFA07A">あいう <th bgcolor="#FFA07A">えおか <th bgcolor="#FFA07A">きくけ </tr> <tr> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> </tr> <tr> <td align="left">ああああああああああああああああ</td> <td align="left">いいいいいいいいいいいいいいい</td> <td align="left">うううううううううううううううう</td> </tr> </table> <br> <br> <table border="1" width="500" cellpadding="5" bordercolor="#333333" /> <tr> <th bgcolor="#FFA07A">こさし <th bgcolor="#FFA07A">すせそ <th bgcolor="#FFA07A">なにぬ </tr> <tr> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> </tr> <tr> <td align="left">ええええええええええええええええええええええ</td> <td align="left">おおおおおおおおおおおおおおおおおおおお</td> <td align="left">かかかかかかかかかかかかかかかかかか</td> </tr> </table> ~~~ CSS ~~~ a.thumbnail { display: block; float: left; } a.thumbnail img{ position: relative; } a.thumbnail, a.thumbnail img{ width: 130px; height: 170px; margin: 0px 0px 0px 5px; } a.thumbnail:hover { border: none; cursor: default; } a.thumbnail:hover img { width: auto; height: auto; }

    • ベストアンサー
    • HTML
  • 同HTML内で複数のjQueryを設置したいです

    買ってきたjQueryの本を元に複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内に入れたいのですが両方ともうまくいきません。 いろいろ自分なりに調べたのですが、わからないです。 うまくいく方法をどうか教えてもらえないでしょうか? 宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div> <!-- END #gnav --> <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div><!-- END wrap --> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div> <!-- END #wrap --> </body> </html>

  • IEとFirefoxでリンクの「hover」の状態が異なります。

    IEとFirefoxでリンクの「hover」の状態が異なります。 メニューに画像を使っているのですが、IEとFirefoxでは「hover」時のbackground-colorのかかり方が異なります。 IEだと画像全体にかかるのですが、Firefoxでは画像の下の方だけにしか色がつきません。 画像をテキストに変更すると、テキスト全体にきちんとかかります。 画像に問題があるのでしょうか? どうすれば解決するのか教えてください。 以下にメニューのソースを載せておきます。 (HTML) <table width="100%" height="40" cellspacing="0"> <tr> <td width="100" ><a href="page1.html"><img src="menu1.gif" border="0" alt=""></a></td> <td width="100" ><a href="page2.html"><img src="menu2.gif" border="0" alt=""></a></td> <td width="100" ><a href="page3.html"><img src="menu3.gif" border="0" alt=""></a></td> <td width="100" ><a href="page4.html"><img src="menu4.gif" border="0" alt=""></a></td> <td width="100" ><a href="page5.html"><img src="menu5.gif" border="0" alt=""></a></td> <td width="100" ><a href="page6.html"><img src="menu6.gif" border="0" alt=""></a></td> <td width="100" ><a href="page7.html"><img src="menu7.gif" border="0" alt=""></a></td> </tr> </table> (CSS) a:hover { background-color: #000000;} どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • お世話になります。

    お世話になります。 早速質問させていただきます。 画像をオンマウスで切り替わるようにしたいのですが、画像切替の時に直ぐに切り替わるのではなく、フェードインしながら切り替わる様にしたいと思っています。 今使っているのは下記の通りです。これをフェードインしながら切り替わるようにできますか? アドバイス宜しくお願い致します。 <table bgcolor="#000000" width="800" align="center" border="2"> <tr align="center"> <td width="150" align="center"> <!-- 商品サブ画像 --> <img src="画像1" width="130" onmouseover="document.myPIC.src='画像リンク"> <img src="画像2" width="130" onmouseover="document.myPIC.src='画像リンク"> <img src="画像3" width="130" onmouseover="document.myPIC.src='画像リンク"> <img src="画像4" width="130" onmouseover="document.myPIC.src='画像リンク"> <!-- 商品メイン画像 --> <td width="650"><BR> <img name="myPIC" src="最初に表示される大きい画像" style=" margin:10px 25px 30px 25px;"> </td> </tr></table>

    • ベストアンサー
    • HTML
  • オンマウスで画像と文字を同時に任意の位置に表示したい

    絵を閲覧するページで以下のようにしたいです。 1.リンク文字の上にマウスを置く 2.任意の位置に『画像』とその画像の下に『文章』が同時に表示される  (何も記載されていない位置に表示されるようにしたいです) 3.マウスを離したら最後に表示したものが消えずにそのまま 画像だけ表示は一応できましたが、 文字と同時にというのはわかりませんでした。 それと何もないところに表示するのができませんでした。 以下、作ったソースです。 <SCRIPT TYPE="text/javascript"> <!-- if (document.images) { var img0 = new Image(); img0.src = "gallery/0.png"; var img1 = new Image(); img1.src = "gallery/1.png"; var img2 = new Image(); img2.src = "gallery/2.png"; } function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // --> </SCRIPT> <!-- ↓ここからBODY --> <Table Border="0" Cellspacing="0" align="center" Width="907" style="line-height:18px;"> <Tr><Td Valign="top"> <Table Border="0" Width="300" Cellspacing="0" style="line-height:18px;"> <Tr><Td ColSpan="2"><Font Size="2"> イラスト </Td></Tr> <Tr><Td Width="10"> </Td><Td><Font Size="2"> <A HREF="gallery/0.png" onMouseOver="On('img0')">作品1</A><BR> <A HREF="gallery/1.png" onMouseOver="On('img1')">作品2</A><BR> <A HREF="gallery/2.png" onMouseOver="On('img2')">作品3</A><BR> </Td></Tr> </Table> </Td> <Td Width="500" Valign="top"> <IMG SRC="" NAME="def"> </Td></Tr> </Table> <!-- ↑ここまでBODY --> 作品を追加していく形式のページなので、 なるべくシンプルなソースでお願いします。

  • スライドショーに妙な間がある。

    いつも為になるアドバイスありがとうございます。 HP作成してるなかで気になったことがあるのですが、jQueryでスライドショーを設定して 画像からリンクを設定すると妙な間があって気になります。 原因は何でしょうか? ご指導願います。 HTMLフォーム <!DOCTYPE html><!----> <html> <head> <meta charset="utf-8"> <title>ファッション通販サイト”Ce qui plait aux fill”</title> <style>/*CSS*/</style> <link rel="stylesheet" href="top.css" type="text/css" media="all"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.fadein img:gt(0)').hide(); setInterval(function() { $('.fadein :first-child').fadeOut() .next('img').fadeIn() .end().appendTo('.fadein'); }, 3000); }); </script> <link rel="stylesheet" href="top.css" type="text/css" media="all"> </head> <body> <div id="wrapper"> <div class="header"> <h1 class="logo"><img src="img/top-logo-01.jpg" /></h1> </div><!--header--> <div class="section"> <div class="fadein"> <a href="リンク01.html"><img src="画像01.jpg" width="400px" height="auto" /></a> <a href="リンク02.html"><img src="画像02.jpg" width="400px" height="auto" /></a> <a href="リンク03.html"><img src="画像03.jpg" width="400px" height="auto" /></a> <a href="リンク04.html"><img src="画像04.jpg" width="400px" height="auto" /></a> <a href="リンク05.html"><img src="画像05.jpg" width="400px" height="auto" /></a> <a href="リンク06.html"><img src="画像06.jpg" width="400px" height="auto" /></a> <a href="リンク07.html"><img src="画像07.jpg" width="400px" height="auto" /></a> <a href="リンク08.html"><img src="画像08.jpg" width="400px" height="auto" /></a> <a href="リンク09.html"><img src="画像09.jpg" width="400px" height="auto" /></a> <a href="リンク10.html"><img src="画像10.jpg" width="400px" height="auto" /></a> <a href="リンク11.html"><img src="画像11.jpg" width="400px" height="auto" /></a> </div><!--fadein--> </div><!--section--> <div class="img"> <p><img src="img/waku.jpg" /></p> </div><!--img--> <div class="news"> <div class="new-item"> <p><img src="img/new-item.jpg" /></p> </div><!--new-item--> </div><!--news--> <div class="item-menu"> <p>最新のアイテムを紹介します。</p> <ul> <li><a href="#">サンダル</a></li> <li><a href="#">パンプス</a></li> <li><a href="#">タンクトップ</a></li> <li><a href="#">キュロット</a></li> <li><a href="#">スカート</a></li> <li><a href="#">ウェッジソール</a></li> <li><a href="#">トレンチコート</a></li> <li><a href="#">カーディガン</a></li> <li><a href="#">ルームウェア</a></li> <li><a href="#">バック</a></li> </ul> </div><!--item-menu--> <div id="footer"> <ul> <li><a href="#">TOP</a></li> <li><a href="#">リンク</a></li> <li><a href="#">サイトマップ</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div><!--footer--> </div><!--wrapper--> </body> </html> CSSフォーム @charset"utf-8"; body{ width:100%; background: #EDE8EA url(img/dot/14.gif) repeat; } body .fadein { position:relative;} .fadein img { position:absolute; left:20px; top:35px; } #wrapper{ margin:auto; width:980px; } .header{ width:980px; padding:0; border: 10px groove #cfc; background:#fff; } .section{ margin:30px 0 0; } .img{ float:left; } .news{ float:left; margin:20px; background:#fff; width:500px; border-radius: 10px; } .new-item{ text-align: center; margin:20px 0 0 0; } .item-menu{ float:left; margin:0 20px; font-size:30px; } .item-menu li{ font-size:24px; background-color:#fff; width:300px; list-style:none; text-align:center; margin:5px; } .item-menu a{ text-decoration:none; } .item-menu li:hover{ text-decoration:underline; background-color:#ADFF2F; } #footer{ clear: both; }

    • ベストアンサー
    • HTML
  • 画像の右横にできたスペースを消したい

    ブログのメニューの右横にスペースがあって見栄えが良くありません。そのスペースの場所にリンクや画像を貼っているわけではないのですが、どうしたらそのスペースを削除できるんでしょうか? 一応、メニューに使っているHTMLを載せておきます。何か間違っていましたらご指摘お願いします。 <div id="top"><P align="left"><A href="メニュー1のリンク"><IMG src="メニュー1の画像" align="middle" border="0"></A><A href="メニュー2のリンク"><IMG src="メニュー2の画像" align="middle" border="0"></A><A href="メニュー3のリンク" target="_blank"><IMG src="メニュー3の画像" align="middle" border="0"></A><A href="メニュー4のリンク"><IMG src="メニュー4の画像" align="middle" border="0"></A><A href="メニュー5のリンク"><IMG src="メニュー5の画像" align="middle" border="0"></A><A href="メニュー1のリンク"><IMG src="メニュー6の画像" align="middle" border="0"></A></p></div>

このQ&Aのポイント
  • アパートWi-Fiで初期設定を行ったが、プリンターをパソコンが検索できない
  • パソコンのOSはWindows11で無線LAN接続されている
  • 関連するソフト・アプリや電話回線の種類は特にない
回答を見る

専門家に質問してみよう