とある案件で対象ブラウザIE5.5での正常動作を求められることがありました。
普段は対象ブラウザをIE6.0～ としていることから、
IE5.5でCSSの挙動を確認するのは初めてだったりするのですが、
overflowでのスクロール表示、ページ上でのタブ切り替えなど順調に進んでいた矢先、
残念なことにIE5.5ではCSSのロールーオーバー（背景画像切り替えではなく<img>タグでの）が
正しく認識せず。。。
仕方なくJavaScriptでの動作を付けることになったのですが、
あまりソースをだらだら長くしたくなかったので調べてみたところ、
ソースの記述を最小限に抑えて可能なロールオーバーを発見。
早速試したのがコレ
ソースにはJavaScriptファイルを読み込むだけで、
実際のボタン部分のソースには何も記述する必要はなし。
ロールオーバーで使用する画像に
・マウスOFFの状態では「_off」
・マウスOVERの状態では「_ov」
といった様に命名規則をつけるだけですみます。
上記サンプルでは以下の様にボタン画像のファイル名を付けています。
・マウスOFF用
btn01_off.jpg
btn02_off.jpg
btn03_off.jpg
・マウスOVER用
btn01_ov.jpg
btn02_ov.jpg
btn03_ov.jpg
【ソース】—————————————–
<ul>
<li><a href=”#”><img src=”img/btn01_off.jpg” width=”100″ height=”100″ alt=”” /></a></li>
<li><a href=”#”><img src=”img/btn02_off.jpg” width=”100″ height=”100″ alt=”” /></a></li>
<li><a href=”#”><img src=”img/btn03_off.jpg” width=”100″ height=”100″ alt=”” /></a></li>
</ul>
—————————————————–
JavaScriptで画像のファイル名を変えることで
ロールオーバーを実現させています。
ソースをシンプルにできるので今後も使えそうです。