とある案件で対象ブラウザIE5.5での正常動作を求められることがありました。

普段は対象ブラウザをIE6.0~ としていることから、
IE5.5でCSSの挙動を確認するのは初めてだったりするのですが、
overflowでのスクロール表示、ページ上でのタブ切り替えなど順調に進んでいた矢先、
残念なことにIE5.5ではCSSのロールーオーバー(背景画像切り替えではなく<img>タグでの)が
正しく認識せず。。。

仕方なくJavaScriptでの動作を付けることになったのですが、
あまりソースをだらだら長くしたくなかったので調べてみたところ、
ソースの記述を最小限に抑えて可能なロールオーバーを発見。

ソースがシンプルなJSによるロールオーバー

早速試したのがコレ

ソースには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で画像のファイル名を変えることで
ロールオーバーを実現させています。

ソースをシンプルにできるので今後も使えそうです。

ボタン素材はココカラ

SHARE

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。

コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して