• 締切済み

EC-CUBEでyuga.jsのロールオーバーが×

自分の知識としては、いつも配布されているJSライブラリ等をそのまま利用しており、 Javascriptそのものについてはあまり詳しくありません。 EC-CUBE（ver2.11.5)にいつも利用しているyuga.jsを搭載したのですが、いつもは出てこない以下のようなエラーメッセージが出てきて、ロールオーバーだけ全く機能しません。 メッセージ: 'this.originalSrc' は Null またはオブジェクトではありません。 ライン: 108 文字: 5 コード: 0 URI: http:/xxxxxxx/js/yuga.js yuga.jsの120行目あたりの以下の部分を削除するとエラーメッセージは消えました。 が、もちろんロールオーバーはうまくいかないままです。 this.rolloverSrc = this.originalSrc.replace(new RegExp('('+c.postfix+')?(\.gif|\.jpg|\.png)$'), c.postfix+"$2"); オンページでの_cr画像での切替はうまくいっております。 他の機能はこのサイトでは使ってないので確認しておりません。 これをうまく機能させるために、どうぞご教授お願いいたします。

みんなの回答

回答No.1

.btnか .allbtnの子であるimgにsrc属性がないものがあるんじゃないでしょうか。 src属性がなくてthis.originalSrcがnullなのにreplaceしようとしていて、 例外処理がないから回避できずにそのエラーが出ている、ということだと思います。 ロールオーバー対象になっているものを確認してみてください。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • エレベーターメニューとシンクボックスとロールオーバーの機能を両立させた

    エレベーターメニューとシンクボックスとロールオーバーの機能を両立させたい。 現在こちらのサイトのように http://momonini.web.fc2.com/test.html scrolllayer.js、jquery.js、thickbox.js、yuga.jsなどのスクリプトを 同時に使っています。 ロールオーバーやthickbox.jsなどyuga.jsの機能はきくものの scrolllayer.jsが動かないのです。 （↑画面のスクロールにあわせてカレンダーがスルスル移動するスクリプトです） htmlのscrolllayer.jsの読み込みをyugaの下にすると、 yuga.jsがきかず、scrolllayer.jsが動きます。 （yuga.jsと一緒にダウンロードしたjquery.jsというファイルを消してもscrolllayer.jsが機能します） どのようにすればスクロールとシンクボックスとロールオーバーの 機能を両立させられるのでしょうか？ よろしければご教授お願いします。 javascriptに全然詳しくありません。 わかりにくい質問でしたら申し訳ありません。

  • a要素でリンク貼るとロールオーバーしないのは何故？

    お世話になります。 Javascriptの知識はほとんどない者ですが、どうかご教授ください。 現在制作中のWebサイトでグローバルメニューのボタン類をJqueryを使ってマウスオン時にロールオーバーさせたいと考えております。非常にありふれたよくある見せ方なんですが、それでhttp://www.kyosuke.jp/yugajs/で配布されているMITライセンス（商用利用なので）のyuga.jsというファイルを使用させてもらってロールオーバーを実現させたいと思いました。手順通り実行してみたのですが、下記のようにごく普通にa要素でリンクを貼るとマウスオーバーしなくなるという現象がおきました。a要素がない場合はロールオーバーするのですが、リンクしてない状態では何の意味もないので、少々困っております。 ↓マウスオーバーしない <a href="index.html"><img src="images/button_06.gif" alt="TOPボタン" class="btn"/></a> ↓マウスオーバーする <img src="images/button_07.gif" alt="TOPボタン" class="btn" /> javascriptのソースを開いてみたのですが、私ではまったく知識がなくて分かりかねました。 恐らくロールーバー部分であろうソースを記載しましたので、どうかご教授ください。 よろしくお願いします。 //ロールオーバー rollover: function(options) { var c = $.extend({ hoverSelector: '.btn, .allbtn img', groupSelector: '.btngroup', postfix: '_on' }, options); //ロールオーバーするノードの初期化 var rolloverImgs = $(c.hoverSelector).filter(isNotCurrent); rolloverImgs.each(function(){ this.originalSrc = $(this).attr('src'); this.rolloverSrc = this.originalSrc.replace(new RegExp('('+c.postfix+')?(\.gif|\.jpg|\.png)$'), c.postfix+"$2"); this.rolloverImg = new Image; this.rolloverImg.src = this.rolloverSrc; }); //グループ内のimg要素を指定するセレクタ生成 var groupingImgs = $(c.groupSelector).find('img').filter(isRolloverImg); //通常ロールオーバー rolloverImgs.not(groupingImgs).hover(function(){ $(this).attr('src',this.rolloverSrc); },function(){ $(this).attr('src',this.originalSrc); }); //グループ化されたロールオーバー $(c.groupSelector).hover(function(){ $(this).find('img').filter(isRolloverImg).each(function(){ $(this).attr('src',this.rolloverSrc); }); },function(){ $(this).find('img').filter(isRolloverImg).each(function(){ $(this).attr('src',this.originalSrc); }); }); //フィルタ用function function isNotCurrent(i){ return Boolean(!this.currentSrc); } function isRolloverImg(i){ return Boolean(this.rolloverSrc); } },

  • IE8で外部jsファイルが読み込めない

    htmlでjavascriptを使用しようとhtmlファイルとjsファイルを同階層に置き、下記のように外部jsファイルを読み込んでいます。 <script type="text/javascript" src="./com.js"></script> しかし、IE8でそのhtmlを開くと 「メッセージ: 文字が正しくありません。ライン: 1文字: 1コード: 0 URI: file:///C:/Users/PCUser/Desktop/test/common/js/com.js」 というエラーが発生してjavascriptが読み込めません。 秀丸でsrc="./com.js"をクリックするとソースが表示されるのでパスは間違えていないと思います。 また、簡単なボタン押下時にalertを表示するscriptを作成して確認したところ、FIRE FOXでは正常に動きましたが、IE8ではやはり動きませんでした。 文字コードはhtml、javascript共にshift-jisです。 他にjavascriptを読み込めない原因は何かありますでしょうか？ よろしくお願いいたします。

  • プルダウンボタン実装後ロールオーバーしない親ボタン

    お世話になります。 連日CSSとJavaScriptのことで質問させていただいている者です。 皆様のご親切で、すこしずつ理想のCSSを記述することができています、ありがとうございます。 さて、またボタンのドロップダウン機能関連のCSSのことでひとつ疑問が出てきましたので、皆様のお知恵を再度拝借させていただきたく質問させていただきました。 現在添付画像のように、Webサイトのメニューボタンにマウスオンすると下部にダウンメニューが飛び出す仕様を作りたいと考えています。親ボタンはカーソルオンさせるとロールオーバーさせたいと、http://www.kyosuke.jp/yugajs/で配布されているyuga.jsというファイルを利用させていただいております。 ドロップダウンボタンはきちんと表示されるようになったのですが、問題はそのドロップダウンボタン機能を記述した親ボタンのみ、ロールオーバーしなくなってしまいました。他のボタンは通常通りロールオーバーしてくれます。できたら親ボタン、またドロップダウンボタン領域にカーソルオンしている時は親ボタンは常にロールオーバーさせていたいと思っています。そのような仕様にするにはどうしたらいいでしょうか。どうかアドバイスいただけたらうれしいです、よろしくお願いします。 HTML--- <nav id="global_nav"> <ul> <li><a href="index.html"><img src="images/button_top.gif" alt="TOPボタン" class="btn"/></a></li> <li><a href="002.html"><img src="images/button_a.gif" alt="Aボタン" class="btn"/></a> <ul> <li><a href="007.html">サブページ01</a></li> <li><a href="008.html">サブページ02</a></li> <li><a href="009.html">サブページ03</a></li> </ul> </li> <li><a href="003.html"><img src="images/button_b.gif" alt="Bボタン" class="btn"/></a></li> <li><a href="004.html"><img src="images/button_c.gif" alt="Cボタン" class="btn"/></a></li> <li><a href="005.html"><img src="images/button_d.gif" alt="Dボタン" class="btn"/></a></li> <li><a href="006.html"><img src="images/button_e.gif" alt="Eボタン" class="btn"/></a></li> </ul> </nav> CSS--- #global_nav { float:right; width:720px; margin:0; padding-right:15px; } #global_nav img { float:left; display:block; border:0; } #global_nav ul { list-style:none; margin:0; padding:0; } #global_nav li { min-width:120px; white-space:nowrap; float:left; } #global_nav ul ul { display:none; position:absolute; z-index:10; padding-top:52px; } #global_nav ul ul a { display:block; font-family:"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", sans-serif; font-size:0.75em; color:#FFF; background-image:url(../images/dawnmenu_button.gif); height:25px; width:120px; text-decoration:none; text-align:center; padding-top:5px; } #global_nav ul ul a:hover { background-image:url(../images/dawnmenu_button02.gif); } #global_nav li li { clear:left; position:relative; width:100% } #global_nav ul li:hover > ul { display:block; } Java Script(yuga.js)---(一部抜粋です) $(function() { $.yuga.rollover(); $.yuga.externalLink(); $.yuga.thickbox(); $.yuga.scroll(); $.yuga.tab(); $.yuga.stripe(); $.yuga.css3class(); }); //ロールオーバー rollover: function(options) { var c = $.extend({ hoverSelector: '.btn, .allbtn img', groupSelector: '.btngroup', postfix: '_on' }, options); //ロールオーバーするノードの初期化 var rolloverImgs = $(c.hoverSelector).filter(isNotCurrent); rolloverImgs.each(function(){ this.originalSrc = $(this).attr('src'); this.rolloverSrc = this.originalSrc.replace(new RegExp('('+c.postfix+')?(\.gif|\.jpg|\.png)$'), c.postfix+"$2"); this.rolloverImg = new Image; this.rolloverImg.src = this.rolloverSrc; }); //グループ内のimg要素を指定するセレクタ生成 var groupingImgs = $(c.groupSelector).find('img').filter(isRolloverImg); //通常ロールオーバー rolloverImgs.not(groupingImgs).hover(function(){ $(this).attr('src',this.rolloverSrc); },function(){ $(this).attr('src',this.originalSrc); }); //グループ化されたロールオーバー $(c.groupSelector).hover(function(){ $(this).find('img').filter(isRolloverImg).each(function(){ $(this).attr('src',this.rolloverSrc); }); },function(){ $(this).find('img').filter(isRolloverImg).each(function(){ $(this).attr('src',this.originalSrc); }); }); //フィルタ用function function isNotCurrent(i){ return Boolean(!this.currentSrc); } function isRolloverImg(i){ return Boolean(this.rolloverSrc); }

    • ベストアンサー
    • CSS
  • jsの実行について

    index.htmlでcommon.jsを読み込んでいます。内容は書きの通りです。 $(document).ready(function() { //実行1 $.updnWatermark.attachAll(); //実行2 $('textarea.resizable:not(.processed)').TextAreaResizer(); //実行3 $('#hoge img').hover(function(){ $(this).fadeTo(100, 0.6); },function(){ $(this).fadeTo(200, 1.0); }); }); ページにより異なるのですが全ての実行を必要とするページもあれば実行1と実行2は必要とせず 実行3だけ必要なページの場合もあります。 その場合には実行1と実行2に必要なjsは読み込まないのですがそうすると実行3が機能しなくなります。 必要なjsを読み込んでないのでうまく処理できずエラーになっているのでしょうか？ 実現したい事はcommon.jsは現状の通り実行するfunctionの定義リストとしページに異なり 実行するものを選定したいのですがどうすればできるのでしょうか？ 単純に実行したいhtml内に直接functionを書けば問題ないのですができればcommon.jsでまとめたいと 思っております。 このような事が実現できる方法がございましたら教えてください。宜しくお願いします。

  • 「Web ページ エラー」を解決したい

    「Web ページ エラー」を解決したい 　 NHKニュースのサイトを訪れると、ほとんどがエラーとなってしまいます。たまに表示されることがありますが、ダメなときが多いです。 何が原因なのでしょうか？解決方法がありましたらお教え願います。 以下、エラーの詳細 Web ページ エラーの詳細 メッセージ: 'Cookie' は宣言されていません。 ライン: 27 文字: 3088 コード: 0 URI: http://www3.nhk.or.jp/news/js/common.js

  • アコーディオンとロールアップの共用について

    今、あるホームページを作っていて、アコーディオンとロールアップの機能を使用したいと思っています。 ロールアップについては今までも使ったことがあり、以下の2つのスクリプトを使用しています。 ○jquery.js　○yuga.js これに、今回はアコーディオンの機能を使いたいので、以下の3つのスクリプトを組み込んで使おうと思いました。 ○accordion.js　○prototype.js　○effects.js で、以下のようにHTMLソースのHEAD内にスクリプトを読み込む記述をして、動作テストを行ったところ、どちらか片方しか動作しないというトラブルが発生しました。 記述の順番を変えると、どちらかが動作するようです。 例1：ロールアップのみ動作する <script type="text/javascript" src="../js/prototype.js"></script> <script type="text/javascript" src="../js/effects.js"></script> <script type="text/javascript" src="../js/accordion.js"></script> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/yuga.js"></script> 例2：アコーディオンのみ動作する <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/yuga.js"></script> <script type="text/javascript" src="../js/prototype.js"></script> <script type="text/javascript" src="../js/effects.js"></script> <script type="text/javascript" src="../js/accordion.js"></script> これら2つの機能を同時に使用するにはどうすればいいでしょうか？

  • mapでロールオーバー

    以下のようにmapでロールオーバーをしようとしたのですが、機能しません。 <div align="center"><img src="images/main.png" alt="" usemap="#map1" border="0"　/></div> <map name="map1"> <area href="taku.html" alt="" shape="rect" coords="766,0,996,69" onmouseover="this.src='images/mainleft1_on.png'" onmouseout="this.src='images/mainleft1.png'" src="images/mainleft1.png" alt="" border="0" /> <area href="taku2.html" alt="" shape="rect" coords="766,70,996,137" onmouseover="this.src='images/mainleft2_on.png'" onmouseout="this.src='images/mainleft2.png'" src="images/mainleft2.png" alt="" border="0"/></map> 全体の画像main.png の上にボタンmainleft1.png　mainleft2.png がロールオーバーするようにしたいんですができないんでしょうか？

    • ベストアンサー
    • HTML
  • ロールオーバーを外部にするとエラーがでます。

    ホームページビルダーＶ９を使用しています。 はじめてjavascriptを扱う初心者ですのでうまく説明が出来ないと思いますが宜しくお願い致します。 ビルダーでロールオーバーを作成し、それを外部ファイルにしました。 ビルダーでプレビューを見ると 「このページのスクリプトでエラーが発生しました エラー：'HPB_SCRIPT_CODE_40''HPB_SCRIPT_CODE_50''HPB_SCRIPT_CODE_50'は宣言されていません。」 と出ます。 ブラウザーで見てみると 「セキュリティ保護の為、コンピュータにアクセス出来るアクティブコンテンツは表示されないようWEBブラウザで制限されています。 オプションを表示するにはここをクリック」と上の方に出ます。 クリックしないとロールオーバーは機能しません。 クリックすると機能します。 ロールオーバーを外部にうまく移動出来ていないのでしょうか？ 外部ファイルを全部載せると文字数オーバーする為１つだけ記載しました。 アドバイスお願い致します。 <HEAD> <META> <TITLE></TITLE> <LINK rel> </HEAD> <BODY> <script type="text/javascript" src="java1.js"></script> <script type="text/javascript" src="java3.js"></script> <script type="text/javascript" src="java2.js"></script> ★java2.js HPB_SCRIPT_PLD_50 HpbImgPreload('_HPB_ROLLOVER1', 'logo3.gif', 'logot7.gif'); HpbImgPreload('_HPB_ROLLOVER2', 'logo4.gif', 'logot17.gif'); HpbImgPreload('_HPB_ROLLOVER3', 'lo_sel.gif', 'logot19.gif'); HpbImgPreload('_HPB_ROLLOVER4', 'lo_car.gif', 'logot20.gif'); HpbImgPreload('_HPB_ROLLOVER5', 'lo_suki.gif', 'logot21.gif'); HpbImgPreload('_HPB_ROLLOVER6', 'lo_kon.gif', 'logot22.gif'); HpbImgPreload('_HPB_ROLLOVER7', 'lo_home.gif', 'logot23.gif');

  • 簡単な正規表現ではまってます。お助けを・・・

    簡単な正規表現ではまってます。お助けを・・・ PHP5.1.6です。 アクセスされたURLの最後にハンカクスラッシュがあった場合、これを削り取って、 新しいURLへ、301のステータスコードでリダイレクトさせたいと思ってます。 で、以下のようなスクリプトを書いたのですが。。。 $this->sPattern = "/(.*)\/$/"; $_SERVER['REQUEST_URI'] = preg_replace($this->sPattern, $1, $_SERVER['REQUEST_URI']); $this->bReturn301StatusCode = true; Parse error: syntax error, unexpected T_LNUMBER, expecting T_VARIABLE or '$' in /var/www/_include/class/uri.class on line 54 といわれてしまいます。 なお、54行目は、 $_SERVER['REQUEST_URI'] = preg_replace($this->sPattern, $1, $_SERVER['REQUEST_URI']); の行です。 エラーメッセージで検索したのですが、分からず。。。 どこが間違っているのでしょうか？ 教えていただければ幸いです。 以上、よろしくお願い申し上げます。

    • ベストアンサー
    • PHP

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する