jQueryを使ったロールオーバーについて

質問

初めまして。Webサイト作成の初心者です。

JQueryを使って、フェードエフェクト効果のあるロールオーバーを作成したいと思っております。
例えば次のサイトでは、若干フェードエフェクト効果のあるロールオーバーとなっておりますが、ソースを見るとbody内にはオフマウス用の画像だけが記されております。

http://mizuame.sakura.ne.jp/jquery.tgImageRollover/demo/script2.html

オンマウス用の画像への切り替えはCSSで行っているのでしょうか？

ちなみに、グローバルメニューなどでは、オフマウス用とオンマウス用の画像を一つにし、CSSで座標を調整することで、ロールオーバーをすることが多いと思いますが、この方法だとJQueryを使ってロールオーバーにフェードエフェクト効果を付けることはできないのでしょうか？

それとも、やはりロールオーバーにフェードエフェクト効果を付けるには、オフマウス用の画像とオンマウス用の画像を、それぞれ用意し、オフマウス用の画像はHTMLに記述し、オンマウス用の画像はCSSに記述するのでしょうか？

どのような回答でもお受けしたい所存で御座いますので、どうか宜しくお願い致します！！

回答No.2

CyberCypher · ベストアンサー

<img class="rollover" src="../img/nav01.png" alt="" width="100" height="50" />

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と違いトリッキーで敷居は高いかと思いますが
基礎知識をもう少しつけて基礎を磐石にすることをお勧めします

お礼

ありがとうございます。ちょっとイメージは掴めてきました。
また一応、JQueryを使って、ロールオーバーさせることができました。

回答No.1

CyberCypher

$(function(){
$('img.rollover').hover( //マウスオーバー
function(){
$(this).stop().animate({'opacity':'0.5'}, 100); //←(1)css命令、{透明度50%}, 100m/sec
$(this).attr('src', $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+'_on'+"$2")); //←(2)imgタグのsrc書き換え、参照している画像を書き換える。例：「/img/nav01.png」→「/img/nav01_on.png」
$(this).stop(true, true).animate({opacity:'1'}, 400 ); //←(3)切り替え終了、クロスフェード　{透明度50%→100%}, 400m/sec
},
function(){
$(this).stop().animate({'opacity':'0.5'}, 100); //←(4)説明は「(1)」参照のこと
$(this).attr('src', $(this).attr('src').replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); //←(5)imgタグのsrc書き換え、参照している画像を書き換える。例：「/img/nav01_on.png」→「/img/nav01.png」
$(this).stop(true, true).animate({opacity:'1'}, 400 ); //←(6)説明は「(3)」を参照のこｔ(ry
}
).each(function(){
$("<img>").attr('src', $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+'_on'+"$2"));//他のimgはsrcの部分を「_on」付きにしちゃう。他の奴はマウスオーバーしてる訳ないもんね！
});
});

jquery部分をコメントアウトしてみた
やっつけだけど分かるかな？

お礼

コメントを付けて頂き、ありがとうございます。勉強になりました！

補足なのですが、ソースの(2)ではimaタグの書き換えとありますが、切り替え後のimg画像はどこに記述しているのでしょうか？CSSで設定しているのでしょうか？

切り替え前のimg画像はHTMLのbody内に記述してあるのですが、切り替え後のimg画像は記述されておりませんでした。