［JS覚書/MT覚書］yuga.jsについて、ロールオーバー（_on）画像とハイライト（_cr）画像使用時の注意

2012年3月29日

今までメインナビはCSSで構築することが多かったのですが、
最近yuga.jsを使ったナビに切り替え始めて、
ちょっと気になることがあったのでメモ書きです。

yuga.jsには、
マウスオーバー時に_onの付いた画像に変更してくれる（ロールオーバー）
現在のページを_crのついた画像に変更してくれる（ハイライト表示）
という便利な機能があるのですが、それの関連項目です。

自ページのハイライト画像はロールオーバーしてくれない。

以前、別の調べ物をしてるときに以下のページを見かけたのですが、

yuga.js で自ページへのリンクを設定している画像がロールオーバーしてくれない。 | btmup Bolg

たぶんロールオーバーとハイライト画像が同じという前提となってるから
ロールオーバーが効かないということになるのだと思う。
自分はほぼ上の設定なので、不便を感じたことはないのですが、
確かにロールオーバー画像がハイライト画像と違う場合はめんどくさいかも。

MTを使ってる場合のトップページへのボタンの_on画像について

MovableTypeを使うときは、<$MTBlogURL$>タグで記述してしまうときが多かったのですが、
その場合　a href内の出力が、このように直URLになるので、

<a href="http://hogehoge.com">

アドレスバーに http://hogehoge.com が入ってると反応してしまうみたいで、
全てのページでHOMEボタンがハイライト表示になってしまいます（＾＾；ひえー。

そこで、/index.html　としてみました。
全ページ表示は回避されたのですが、
アドレスバーで http://hogehoge.com/index.html のように
/index.html が表示されてないとcr画像に置き換わらないです。
http://hogehoge.com と入力された場合は、切替されないです。

「/」も試したが、これも直URLリンクの時と同じで、
別のページでもcr画像切替してしまいます。

なので、http://hogehoge.com/index.html とならないと切り替わらないけど、/index.html 表記がベストかなと。

<a href="/index.html"><img src="/images/mainnavi_home.png" alt="トップページ" width="137" height="66" /></a>

トップページでは、ハイライトしなくてもいいという考え方もあると思うので、いっそcr画像を通常画像と同じにしてしまってもよいかなと思いました。

index以下の同コンテンツ内のサブページでもcr切替させたい場合

これとは反対に、コンテンツのトップ（index.html）だけでなく、
下位のコンテンツページでも、cr表示させたい場合、
/service/index.html
とやってしまうと、index.htmlページでしか、cr画像切替しない。

/service/
とすると、下位のページ（例えば service/product.html でも、cr切替します。

最終形態

で、最終的には以下のような感じに。

<li><a href="/index.html"><img src="/images/mainnavi_home.png" alt="トップページ" width="137" height="66" class="btn"/></a></li>
<li><a href="/content/"><img src="/images/mainnavi_content.png" alt="コンテンツ1" width="137" height="66" class="btn"/></a></li>
<li><a href="/content2/"><img src="/images/mainnavi_content.png" alt="コンテンツ2" width="137" height="66" class="btn"/></a></li>