Dreamweaverテンプレート内のナビ画像を、ページに合わせて変更

質問

グローバルナビを画像（img src）で作成し、Dreamweaverでナビをテンプレート化しています。以下のような構造です。

<ul id="Navi">
<li><a href="link1.html"><img src="link1.gif" /></a></li>
<li><a href="link2.html"><img src="link2.gif" /></a></li>
<li><a href="link3.html"><img src="link3.gif" /></a></li>
<li><a href="link4.html"><img src="link4.gif" /></a></li>
<li><a href="link5.html"><img src="link5.gif" /></a></li>
</ul>

疑問なのですが、上記のナビゲーションをdwtでテンプレ化すると、各HTMLファイルではナビ部分はロックがかかって編集できなくなりますが、その状態で、
「ナビ内の、今いる階層に対応したボタンの色を変える（＝別の画像にする）」
方法は何かありますでしょうか？
（例：会社概要のページにいる時はナビ内の「会社概要」ボタンの色を変える）

コーディングのTips、.jsライブラリ、どんな解決策も大歓迎です。
ユーザビリティの確保＋作業の効率化のため、是非解決したい問題ですので、宜しくお願い致します。

回答No.1

suzuko

一番簡単なのは、ナビにidかclassをつけて、headにCSSリンクを編集可能領域に指定します。

そして「ナビ内の、今いる階層に」合わせてCSSを変更し「対応したボタンの色を変える（＝別の画像にする）」ようにCSSに書きます。

でも、これって結局めんどくさいですよ。

自分なら階層ごとにテンプレートを切りますが。
親テンプレートには「ナビ部分」を指定しない物を使い、子テンプレート（階層ごとのテンプレート）で「ナビ部分」を指定。

お礼

ご回答、ありがとうございます。

＞＞「対応したボタンの色を変える（＝別の画像にする）」ようにCSSに書きます
そうですね～。CSSで背景画像を設定してナビを作るときはこれでいけるんですが、imgの場合はやはり「階層ごとのテンプレート切り」でしょうか。

＞＞自分なら階層ごとにテンプレートを切りますが。
親テンプレートには「ナビ部分」を指定しない物を使い、子テンプレート（階層ごとのテンプレート）で「ナビ部分」を指定。
あ、この手法は自分も昔やっていました。一人で管理する分には便利ですよね。