IR（Image Replace）を使ってグローバルメニューをテキストで表示しつつロールオーバー＆基点表示しよう。 ということで前回とほぼかわりないんですけどよりCSS的に！よりXHTML的にソースコードを美しく、かつ簡単にグローバルメニューにロールオーバーと基点表示を実装しようというこの企画。メニュー毎にIDやクラスを指定してスタイルを書くのは美しくないですよね？じゃぁJavascript先生がやってやろうじゃないの！ということです。実装手順は以下の通り。
１．まずhead内からjquery.jsとnavigatorIR.jsを呼び出します。
２．メニューのaタグにクラス名 navigatorIRを書いて、背景に指定したい画像のファイル名をIDに指定しましょう。
３．navigatorIR.js内にメニュー画像の表示縦横サイズと公開ルートからの絶対パスを記載します。
４．これだけでOK
どうです？簡単でしょう？サンプルは以下の通りアルよ。 http://lab.synck.com/navigatorIR.js/index.html
もし気になった方はダウソロードしてみてくださいね。 http://labs.synck.jp/documents/12556330321373115378.zip