閲覧カテゴリのグローバルナビ画像アクティブ化とロールオーバー｜jquery
世の中にはもっと便利だったり簡単だったり高機能だったりするプラグインがありますが、敢えて挑戦。内容を自分で理解しながら弄ったほうが何かと融通もきくので。
この程度のことは世の中の先輩達が親切にweb上で教えてくれるのでそれらを探しながら書いていきます。ありがとう先輩。
前提
リンクはテキスト+CSSではなくて画像。画像一枚をCSSで切り替えるんじゃなくて、通常時とマウスオーバー時の2つの画像で。割と古典的ですね（今の主流はどんなのなの？）。
出来る事
1.閲覧しているページが含まれるグローバルナビゲーションのボタン画像が買ってにアクティブになる（良く見かけますね）
2.他のグローバルメニューはオンマウスでロールオーバー（もはやデフォルト）
3.ついでにimg要素のclass属性に”Hover”と指定しておけばそれもロールオーバー（こっちもデフォルト）
必要なもの
・jquery（ここからDLできます）
・html（エントリ内にあります）
・javascript（エントリ内にあります）
・ボタン画像（通常時とオーバー時を必要な分用意しましょう。オーバー時の画像はファイル名の後に”-ov”を付けといてください。）
・うまく動かなかったり、そもそもこのエントリーの内容が間違ってても怒らない優しさ
・間違っている箇所や、より良い方法を親切に教えてくれる優しさ
現時点で何とかしたいと思ってる事
・画像はプリロードではないので環境によってはちらつくかも
・多分もっとシンプルにできる
ソース
細かい属性やら値やらは省略しています。
<ul id="GlobalNavi"> <li class="vvvvv"><img src="/images/globalnavi01.jpg" /></li> <li class="wwwww"><a href="/wwwww/index.html"><img src="/images/globalnavi02.jpg" /></a></li> <li class="xxxxx"><a href="/xxxxx/index.html"><img src="/images/globalnavi03.jpg" /></a></li> <li class="yyyyy"><a href="/yyyyy/index.html"><img src="/images/globalnavi04.jpg" /></a></li> <li class="zzzzz"><a href="/zzzzz/index.html"><img src="/images/globalnavi05.jpg" /></a></li> </ul>
$(function ()
{
//閲覧してるページを含むグローバルナビゲーションのボタン画像をアクティブにするスクリプト
//今開いているページURLのパスをを取得
path = location.pathname //もしパス内の一部が"vvvvv"と一致したら
if (path.match("/vvvvv/"))
{
//セレクタに該当する要素のsrc属性の値を"globalnavi01-ov.jp"に書き換える
$("#GlobalNavi li.vvvvv a img").attr("src", "/images/globalnavi01-ov.jpg");
}
//条件を変えてグローバルナビ数分、以下繰り返し。
if (path.match("/wwwww/")) {
$("#GlobalNavi li.wwwww a img").attr("src", "/images/globalnavi02-ov.jpg");
}
if (path.match("/xxxxx/")) {
$("#GlobalNavi li.xxxxx a img").attr("src", "/images/globalnavi03-ov.jpg");
}
if (path.match("/yyyyy/")) {
$("#GlobalNavi li.yyyyy a img").attr("src", "/images/globalnavi04-ov.jpg");
}
if (path.match("/zzzzz/")) {
$("#GlobalNavi li.zzzzz a img").attr("src", "/images/globalnavi05-ov.jpg");
}
//ロールオーバーのスクリプト
//セレクタに該当する要素で、srcの値に"-ov."が付いていないものに以下functionを実行する
$('#GlobalNavi li a img,img.Hover').not('[src*="' + '-ov' + '."]').each(function ()
{
//触っている画像（this）のsrc属性の値を取得して、変数srcに代入
var src = $(this).attr('src');
//上で取得した変数srcの「拡張子前までの文字列+文字列"-ov"+拡張子」を変数src-ovに代入
var src-ov = src.substr(0, src.lastIndexOf('.')) + '-ov' + src.substr(src.lastIndexOf('.'));
//マウスオーバー時にはsrc属性の値を変数src-ovの値に書き換え、マウスアウト時には変数srcの値に書き換える
$(this).hover( function ()
{
$(this).attr('src', src-ov);
},
function ()
{
$(this).attr('src', src);
} );
});
})
備考
・グローバルナビのhtmlがリスト要素じゃない場合はセレクタ側で調整できます。
・もちろんルールに沿って追記すればグローバルナビ数の増減もできます。
・jsの30、35行周辺の”-ov”を他の文字列にすれば、画像命名ルールも調整できます。（”-o”とか”_ov”とかね）
・30行目のセレクタを弄れば対象の画像を増やしたりもできます。input要素とか。
ご自分の環境に併せて弄ってくださいね。
まとめと感想
超シンプルな機能と書き方なので、割とすぐに仕組みは理解できると思います。コメントも出来るだけ書きました。いきなり高度なソースを見ると「理解する」ことを放棄して「動いてるからいいか」になりがちなので、理解できる範囲の簡単なところから積み上げていくことが以外に近道です。間違いや「こうしたら良くね？」というお話しはどしどしお待ちしております。是非お聞かせください。
