グローバルメニューにロールオーバー付ける時、DreamWeaverでやると面倒ですよね。 そんな皆様の不平不満をこのスクリプトがアッと言う間に解決しちゃいますよっ！
主に想定されるケースは以下の３パターン。
・単純にグローバルメニューの画像をロールオーバーさせたい
・現在のページのメニュー画像だけを替えたい
・ロールオーバーに加えてアウトしたときにも別な画像を使いたい
と、こんなところです。そこでこのnavigator.jsとjquery.jsをページ上で読み込み、グローバルメニューの画像の親タグであるアンカータグにclass="navigator"と指定しましょう。それだけでOKです。素晴らしい。詳細はサンプルを見て頂きたいのですがHTMLもスッキリして明快です。
サンプルは次のURLより。 http://lab.synck.com/navigator.js/index.html
以下、実装方法
メニューを作る時は「ファイル名_連番.拡張子」という命名規則だけ守って下さい。ようはファイル名をメニューの連番で保存してくださいという事ですね。例えば「nv_01.gif」だとか「menu_01.gif」だとかそんなのです。
ロールオーバーの画像はメニュー画像が「nv_01.gif」の場合、「nv_over_01.gif」とします。PhotoShopのスライスでナビゲータを作るのが前提なのでちょっとややこしいかしら。ようは「_」が「_over_」になるという事ですね。
次にロールアウトしたときに最初の画像以外の画像、例えばアニメーションGIFなどを表示したい場合は「nv_out_01.gif」というように「_out_」をつけた画像を用意します。
次に現在いるページをメニュー画像に反映したい場合の画像を用意します。こういうちょっとした気配りでユーザビリティはグッと向上するんですよね。画像の命名規則は「_current_」。「nv_current_01.gif」というように用意しましょう。
最後にグローバルメニューのaタグにclassをつければOKですね。
ともあれ、実際に使ってみたい方はサンプルソースも入っているのでぜひお試しアレ。
最新版を以下URLに公開しました（2011-02-24）。