web dimension maker

今回は、javascriptを使ってグローバルナビやローカルナビをハイライト(オンマウス時の状態)にする方法をjQueryを使って簡単にやってみたいと思います。

今回のサンプルでは、「画像のグローバルナビ」を想定して作りました。これを応用すれば、ローカルナビの場合や、該当のリンクのCSSを変更することも出来るはずです。

詳しいソースはサンプルに直書きしております。下記に簡単な仕組みを箇条書きにしてみます。

• jQueryとglobalNaviCurrent関数で成り立っています。
• まずはlocation.pathnameで、開いているページのパスを取得します。(サンプルの場合は「/sample/2008/04/sample1.html」になります)
• 取得したパスを「/」で分割し配列に収めます。そこから必要な部分のみ取り出し並べて、グローバルナビに記述されているパスと同じパスを作製します。（サンプルの場合は /sample/index.html になります。)
• jQueryに該当するリンク内の画像を探してもらいます。
• その画像のsrc属性の中身を取り出し、「.」を検索します。そして、「.」の前に、オンマウス時の画像のファイル名になるように文字列を継ぎ足します。(サンプルの場合は「_o」になります。)
• 再度、src属性にオンマウス時の画像のファイル名を入れます。

以上です。わかりにくいですね。。すみません。。あと、今回は、class="imgover"でロールオーバー処理をしているので、そのクラスも削除するようになっています。