• ベストアンサー
  • 困ってます

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>

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数501
  • ありがとう数1

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

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

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

共感・感謝の気持ちを伝えよう!

質問者からのお礼

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

関連するQ&A

  • テーブル高さ指定タグについて

    テーブル高さ指定タグについて サイズがバラバラの4枚の画像をテーブルを使って同じ幅・高さ縦横各2枚並べて表示したいと思っています。 下記のとおり高さ・幅300と指定をしているにもかかわらず、400×400pixの画像が高さを超えて目いっぱい表示してしまいます。 <table border="1" width="600" height="600" cellspacing="0" cellpadding="0"> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_1.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_2.jpg"></td> </tr> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_3.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_4.jpg"></td> </tr> </table> どうすれば、すべて300×300pixの範囲内におさめることができるのでしょうか?

    • ベストアンサー
    • HTML
  • スライドショー

    初めまして、ちゃりおと申します。 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を使っていますが、 新しいバージョンでも構いません。 よろしくお願いします。

  • お世話になります。

    お世話になります。 早速質問させていただきます。 画像をオンマウスで切り替わるようにしたいのですが、画像切替の時に直ぐに切り替わるのではなく、フェードインしながら切り替わる様にしたいと思っています。 今使っているのは下記の通りです。これをフェードインしながら切り替わるようにできますか? アドバイス宜しくお願い致します。 <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
  • 正方形のセルに縦画像、横画像を中央に配置

    よろしくお願いいたします。 テーブルを使って、写真のサムネイル一覧表を作成しています。 100x100 の2つのセルをペアとして横に並べ、横画像(100w x 75h)または縦画像(75w x 100h)を入れています。 この時、横画像だけを入れたペアは、セルの高さが画像と同じ(75)になってしまいます。 常にセルの高さを 100に保つにはどのようにしたらよいのでしょうか。 現在は次のように記述しています。 <TR><!---- 高さ 100 OK --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="H_100.jpg" width="75" height="100" border="0"></TD> </TR> <TR><!---- 高さ 75 NG!! --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> </TR>

    • ベストアンサー
    • HTML
  • タグをwiki文法に変えていただけないでしょうか(-"-)

    タグをwiki文法に変えていただけないでしょうか。。 <div style="width:160px;text-align:center;"><script type="text/javascript" language="JavaScript" src="http://www.blogdeco.jp/renda/tag.php?parts_id=125903271688482"></script><noscript><a href="http://www.blogdeco.jp/" target="_blank"><img src="http://www.blogdeco.jp/img/jsWarning.gif" width="140" height="140" border="0" alt="Blogdeco" /></a></noscript><a href="http://www.blogdeco.jp/">ブログパーツ</a></div>

  • noscriptをどうすれば?

    大小の画像を2枚用意して クリックすると大画像が別ウィンドウで表示できるようになりました。 javascripがOFFの時にnoscriptで別窓表示させるようにもしました。 最初はnoscriptを別に置いたのですが、これだとjavascripがOFFの時に最初から小画像が2つ表示されてしまいます・・・ <a href="javascript:void(0)" onclick=" window.open('big.jpg', '_blank', 'width=600,height=600,scrollbars=no,toolbar=no,menubar=no,directories=no,location=no'); "> <img src="mini.jpg" width="300" height="300" alt="画"> </a> <noscript><a href="big.jpg"> <img src="mini.jpg" width="300" height="300" alt="画"></a> "></noscript> そこで、下記のようにしましたが・・・ 動作はできるみたいです。でもnoscriptのHTMLでの位置で何か変な感じです。正しい方法をご教授ください。 <a href="javascript:void(0)" onclick=" window.open('big.jpg', '_blank', 'width=600,height=600,scrollbars=no,toolbar=no,menubar=no,directories=no,location=no'); "> <noscript><a href="big.jpg"></noscript> <img src="mini.jpg" width="300" height="300" alt="画"> </a> これ1枚の画像だけなのでライブラリを使いたくないのです。

  • aaa!cafeにて

    リンクが表示されないのです。 <html> <body bgcolor="black" link="red" vlink="glay"> <font color="white"> <title>リンク</title> <table align="center"> コメント </table> </p> <hr> <table border="1" width="90%" align="center"> <STYLE TYPE="text/css"> <!-- td{ color: white; } --> </STYLE> <tr> <td colspan="3" align="center"><font color="yellow">コメント</font></td> </tr> <tr> <td align="center"><img src="link_banner/search_the_bass.jpg"></td><td align="center"><a href="アド">サイト</a></td> <td>コメント</td> <tr> <td align="center"><img src="link_banner/fun.gif"></td><td align="center"><a href="アド">サイト</a></td> <td></td> </tr> <tr> <td colspan="3" align="center"><font color="aqua">お役立ちサイト</font></td> </tr> <tr> <td align="center"><img src="link_banner/manbo_bass.gif"></td><td align="center"><a href="http://degu.***.org/ranking/bass/autorank/rankem.cgi?action=in&id=sunsurf" target="_new">Bass Site Ranking</a>ココが表示されません</td> <td>コメント</td> </tr> <tr> <td align="center"><img src="link_banner/nanikiru_s5.gif"></td><td><a href="http://www.***.net/">なにきる.ねっと</a></td> <td>コメント</td> </tr> </table> </body> </html> ココが表示されません、というとこなんです。<a href~がサーバにアップすると消えるんです。 悩みの種です・・・。よろしくお教えください!

  • 画像のサムネイルを縦横ともに指定した数値以内で表示したい。

    いままで画像を縦横比を維持して表示するには、縦一方の大きさを指定してたのですが これだと横長の画像を多く並べる場合デザインが大きく狂ってしまいます…。(どんどん横に広がってしまいます) googleやpixivのように縦横整えて表示させたいのですが、やり方が分かりません。どのようにすればよいのでしょうか。 イメージとしてはこんな感じです。 ・130ピクセルx130ピクセルの枠の中に縦横比を維持した画像を表示させる。 ・その枠を横に四つ並べる。 (縦長の画像は極端に縦長に表示され、横長の画像は極端に横長に表示されるということです。) 各画像の表示例は、例えばgoogle画像検索やpixivなど。 →google画像検索 http://images.google.co.jp/images?hl=ja&safe=off&q=%E3%83%91%E3%83%8E%E3%83%A9%E3%83%9E&lr=&um=1&ie=UTF-8&sa=N&tab=wi →pixiv http://www.pixiv.net/search.php?word=%E6%BC%AB%E7%94%BB&s_mode=s_tag ---いままで使ってたソース--- <table width="80%"> <tr align="center"> <td><a href="001.jpg"><img src="001.jpg" border="0" height="130"></a></td> <td><a href="002.jpg"><img src="002.jpg" border="0" height="130"></a></td> <td><a href="003.jpg"><img src="003.jpg" border="0" height="130"></a></td> <td><a href="004.jpg"><img src="004.jpg" border="0" height="130"></a></td> </tr> <table width="80%"> <tr align="center"> <td><a href="005.jpg"><img src="005.jpg" border="0" height="130"></a></td> <td><a href="006.jpg"><img src="006.jpg" border="0" height="130"></a></td> <td><a href="007.jpg"><img src="007.jpg" border="0" height="130"></a></td> <td><a href="008.jpg"><img src="008.jpg" border="0" height="130"></a></td> </tr> ---ここまで--- こんなソースを使ってました。 教えてください、よろしくお願いします。

    • ベストアンサー
    • HTML
  • 写真の下に説明文

    こんにちは。 今アルバムのページを作っています。 右側に縮小した写真を縦に並べ、その写真をクリックすると画面中央に拡大されて映るというものです。 拡大された時、写真の簡単な説明文を写真の下に表示させたいんですが、やり方がわかりません。検索してみたんですが、それらしき物が見つからずこちらに参りました。 だいぶ略してますが、下記のようなソースを使って作りますよね?これで、中央に表示させるまでは出来ました。後は各写真の説明文の表示だけなんです。 <script type="text/javascript"> <!-- var img01 = "../photoothers/stamp.jpg"; function startimg(I){  document.image.src=I;  } //--> </script> =中略= <table> <tr> <td align=center> <table border =1> </td> </tr> <tr> <td align=center> <img src="../gif/●.jpg" name="image"> </td> </tr> </table> </td> <td> <table align=right"> <tr> <td align=center> <a href="javascript:startimg(img01)"> <img src="../gif/●.jpg" width="130" height="100"></a> </td> </tr> </table> </td> </tr> </table> 宜しくお願いします。