- ベストアンサー
jQueryの記述方法とナビゲーションのロールオーバーについて
- webサイトを作成中の方へ、jQueryの使用方法とナビゲーションのロールオーバーについて教えてください。
- 質問者はjQueryを使用してナビゲーションのロールオーバーを実現しようとしていますが、うまくいっていません。質問文には必要なコードが記載されていますが、初心者のためどこが誤っているのか分からないようです。
- 質問者はhtmlファイルと同じフォルダ内にjavascriptファイルとjquery-1.6.4.min.jsを配置し、imgフォルダ内には画像と拡張子の前に_onを付けた画像を保存しています。
- famiria
- お礼率82% (74/90)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （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を外部にするときにかならず記載しなければならないことを教えてください。 特にないと思いますよ。 外部ファイルへのパスがちゃんと通ってる（ファイルが存在する）かは、 確認したほうが良いでしょうけど。
その他の回答 (1)
- mikemike7
- ベストアンサー率87% (97/111)
JQueryというより単純にJavaScriptの記述ミスじゃないです？ .replace(/^(.+)(￥.{a-z]+)$/,"$1_on$2")); .replace(/^(.+)_on(￥.{a-z]+)$/,"$1$2")); .replace(/^(.+)(￥.{a-z]+)$/,"$1_on$2")); 上記のどれもが ￥が全角文字になっているので半角文字の \ にする。 { ではなく [ にする 最後の ]); は }); ですね。
補足
回答ありがとうございます。 記述ミスを直したのですが、動作しませんでした。 簡単な命令を出してみたのですが、反応しませんでした。 htmlとjavascriptを外部にするときにかならず記載しなければならないことを教えてください。
お礼
回答ありがとうございます。 コピペをさせて頂きましたらできました。 今回は、本当にありがとうございました。