• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：jQuery 記述方法）

jQueryの記述方法とナビゲーションのロールオーバーについて

このQ&Aのポイント
  • webサイトを作成中の方へ、jQueryの使用方法とナビゲーションのロールオーバーについて教えてください。
  • 質問者はjQueryを使用してナビゲーションのロールオーバーを実現しようとしていますが、うまくいっていません。質問文には必要なコードが記載されていますが、初心者のためどこが誤っているのか分からないようです。
  • 質問者はhtmlファイルと同じフォルダ内にjavascriptファイルとjquery-1.6.4.min.jsを配置し、imgフォルダ内には画像と拡張子の前に_onを付けた画像を保存しています。

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

  • ベストアンサー
  • mikemike7
  • ベストアンサー率87% (97/111)
回答No.2

No1です。 他にも記述ミスあったかなあ... とりあえず全文は、これで。 $(function(){ $("img.navi").mouseover(function(){ $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); }).mouseout(function(){ $(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); }).each(function(){ $("img").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); }); }); 今、気づいたんだけど、 .each(function(){ $("img").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); }); 入れると、初めからimg/top_on.gifになるから、 マウスオーバーした時にimg/top_on_on.gifになるから、 画像なしになりますよ。 だからこの記述はいらないですね。 $(function(){ $("img.navi").mouseover(function(){ $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); }).mouseout(function(){ $(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); }); }); で良いと思います。 コピーして貼り付けて試して下さい。 >htmlとjavascriptを外部にするときにかならず記載しなければならないことを教えてください。 特にないと思いますよ。 外部ファイルへのパスがちゃんと通ってる（ファイルが存在する）かは、 確認したほうが良いでしょうけど。

famiria
質問者

お礼

回答ありがとうございます。 コピペをさせて頂きましたらできました。 今回は、本当にありがとうございました。

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

その他の回答 (1)

  • mikemike7
  • ベストアンサー率87% (97/111)
回答No.1

JQueryというより単純にJavaScriptの記述ミスじゃないです？ 　.replace(/^(.+)(￥.{a-z]+)$/,"$1_on$2")); 　.replace(/^(.+)_on(￥.{a-z]+)$/,"$1$2")); 　.replace(/^(.+)(￥.{a-z]+)$/,"$1_on$2")); 上記のどれもが 　￥が全角文字になっているので半角文字の \ にする。 　{ ではなく [ にする 最後の ]); は }); ですね。

famiria
質問者

補足

回答ありがとうございます。 記述ミスを直したのですが、動作しませんでした。 簡単な命令を出してみたのですが、反応しませんでした。 htmlとjavascriptを外部にするときにかならず記載しなければならないことを教えてください。

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

ピータッチ 9500pc 対応テープ
このQ&Aのポイント
  • ピータッチ 9500pc 対応テープについてのトラブルやお困りごとについて相談ください。
  • お使いのパソコンやスマートフォンの環境や接続方法、関連するソフト・アプリ、電話回線の種類などを教えてください。
  • ブラザー製品のピータッチ 9500pc に関するお問い合わせです。
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する