2010年09月16日

IE6で、PNGボタンのロールオーバー

IE6で、PNG画像を表示しようとした場合、ブラウザの使用上、japascriptを利用しないと表示することが出来ません。
有名どころでいうと、下記が有名と思います。
alphafilter
iepngfix


それぞれを使用しつつロールオーバーを行う場合、状況に応じてうまくいかない場合があります。
まず、alphafilter の場合
alphafilterは、上記に記載したURLを見て貰うと分かりますが、ロールオーバー対応してくれており、ロールオーバーさせたい画像に対して、class属性「btn」を記述すれば、ロールオーバーします。
ただしCSSにて、position: absolute などを利用している場合、ボタン自体が消える現象に遭遇します。

次に、iepngfix の場合
iepngfixは、PNG画像のclass属性に「iepngfix」を記述すれば、PNGが表示されますが、
デフォルトのままの場合、画像が表示されつつ×印が表示されます。
×印を回避するのに、僕の場合は、昔懐かしい、spacer.gif を読み込ませています。

この状態でロールオーバーさせれば、問題ないかと思い普段使っているロールオーバー用のjQuery(こんな感じのやつ)を読み込ませて試してみると、ロールオーバーしました。
ただし問題があって、ロールオーバーした画像に×印がついてしまいました・・・。

前述した通り、spacer.gif を読み込ませれば解決すると思いますが、設定する箇所が1ヵ所しかなく、2個目が設定できません。
ただし色々調べてみると、iepngfixの場合、HTMLソースへの直書きをすることで、ロールオーバーを可能にする方法がありました。
<img src="/images/sample.png" onmouseover="this.src='/images/sample_ov.png',IEPNGFIX.fix(this)" onmouseout="this.src='/images/sample.png',IEPNGFIX.fix(this)" class="iepngfix" alt="sample" width="100" height="100" />


今回、PNGボタンのロールオーバーの必要箇所が1ヵ所のみだったのですが、特殊な位置へ設置する必要があり、iepngfix を直書きにて対応しました。
position: absolute を記述するようなことがなければ、alphafilterが楽かもしれないですね。

そんなことより、IE6がなくなればいいのに!
posted by memo4me at 11:00 | Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。