質問: jqueryを使ったロールオーバーについて 初めまして。webサイト作成の初心者です。 jqueryを使って、フェードエフェクト効果のあるロールオーバーを作成したいと思っております。 例えば次のサイトでは、若干フェードエフェクト効果のあるロールオーバーとなっておりますが、ソースを見るとbody内にはオフマウス用の画像だけが記されております。 http://mizuame.sakura.ne.jp/jquery.tgimagerollover/demo/script2.html オンマウス用の画像への切り替えはcssで行っているのでしょうか? ちなみに、グローバルメニューなどでは、オフマウス用とオンマウス用の画像を一つにし、cssで座標を調整することで、ロールオーバーをすることが多いと思いますが、この方法だとjqueryを使ってロールオーバーにフェードエフェクト効果を付けることはできないのでしょうか? それとも、やはりロールオーバーにフェードエフェクト効果を付けるには、オフマウス用の画像とオンマウス用の画像を、それぞれ用意し、オフマウス用の画像はhtmlに記述し、オンマウス用の画像はcssに記述するのでしょうか? どのような回答でもお受けしたい所存で御座いますので、どうか宜しくお願い致します!!
回答: imaではありません、imgです。 もう少し噛み砕きますと、 $('img.rollover').hover( html内のimg要素がマウスオーバー状態になった際にimgオブジェクトを参照します 参照している間、「$(this)」と言うのは参照しているオブジェクトを指します。 $(this).attr( 「$(this)」は前述通り、参照している最中のオブジェクトを指します。 では「attr」とは?、参照しているオブジェクトの属性を参照し変更します。 属性とは、class、src、alt、widthなどなどのことです。 $(this).attr('属性ターゲット', '属性内容'); 第一引数には変更したい属性を参照します 今回はimgのsrcを変更しています。 では、srcをどのように変更しているのかを追ってみます。 $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+'_on'+"$2") 「$(this).attr('src')」から見てみましょう $(this)は何度も出てきているので割愛します。 また出ました「attr('src')」今回は第二引数が見当たりません 第二引数がない状態だとただ参照しに行くだけに留まります どういう事かと言うと、参照しているオブジェクトの属性を見に行っています 今回は$(this)「imgタグ」のattr('src')「srcの中身」を見に行っているわけですね ......と言うことは取得できる値は「src="../img/nav01.png"」コレの「../img/nav01.png」この部分な訳ですね では参照した後のコードを見てみましょう .replace(/^(.+)(\.[a-z]+)$/,"$1"+'_on'+"$2") replaceと言うのは文字列の置き換えです。 "変更する文字列".replace("ターゲットの文字列", "変更後の文字列") さらに軽く噛み砕きます 「/^」:先頭に「/」が付いている 「(.+)(\.[a-z]+)」:ファイル名を探す 「(.+)」:ファイル名 「(\.[a-z]+)」:「.」を含んだ拡張子 ()でくくっているのはグループ化と呼ばれるものです ()をつけた順番で$1、$2と呼び出せるのです 要するに最終的には例を挙げると replace("/nav01.png", "/nav01"+"_on"+".png") となるわけです わからなければ 「正規表現」と「文字列の置き換え」について調べてみましょう さて纏めてみます "ターゲットオブジェクト"."属性を参照(変更)"('srcを参照', '現在のsrcを参照し文字列を置き換えしてsrcに渡す文字列にする'); $(this).attr('src', $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+'_on'+"$2")); この一行で「/img/nav01.png」→「/img/nav01_on.png」このように参照画像が変わる訳です 以上のことは意外とjqueryの基礎の方だったりします jqueryはjavascriptと違いトリッキーで敷居は高いかと思いますが 基礎知識をもう少しつけて基礎を磐石にすることをお勧めします