解決法その１：IE6を抹殺

とか言っていても、もうしばらくはIE6の牙城が崩れないだろうから、なんとかIE6抹殺以外の解決方法を探してみたいと思います。


解決法その２：PNGを使わない

はい。出ました。またもや何の解決にもならない方法。

まあ大体は透過PNGなんか使わなくてもサイトは構築出来るんですが、たまーに、ヘッダの背景とかがコンテンツによって変化して、左上のロゴマークは不動。なので透過PNGだと楽。とかいう場合がありますし、画像の上に透過PNGのメニューボタンおいて、それをロールオーバーさせたい、なんてことも、まあこれからは色々あるのではないでしょうか？

じゃあ、JavaScriptを使ってみる。

まず、透過PNGそのものをIE6で正しく表示出来ないので、それをクリアする必要があります。

iepngfix.js

iepngfix.js という有名なjsがありますので、まず前提としてこちらを使用します。

このソースの前半に、
blank: 'http://www.isella.com/aod2/images/blank.gif',
という部分があるのですが、これは「透明GIF」です。透明GIFと組み合わせてPNGを正しく表示させるハック？なので、この透明GIFは自分のサーバにおいて、パスは書き換えた方が、将来的に良いですね。

本家通りの使い方だと、cssで使用する場所とかに
behavior: expression(IEPNGFIX.fix(this));
とかしないといけないので、ものぐさ太郎的には、もうちょっと楽にしたい。

ということで、かなりスマートさが足りないのですが、ちょっと簡単な分かりやすい？スクリプトを書いてみました。
もっとスマートに書けるんだろうけど、jquery.jsの機能を使いこなせていない私は、以下のような方法で実装。

ついでにロールオーバーも実装

横着でごめんなさい。

iepngrollover.js

jquery.js使用前提で書いてみました。
使いたい方は、こちらからどうぞ。→iepngrollover.js

使い方

jquery.js、iepngfix.js、iepngrollover.js という順番で呼び出して、、、、、

ロールオーバー

ロールオーバーしたい画像のimgタグに、class="rollover" を設定して、ロールオーバー用の画像を用意。
ロールオーバー用の画像は、元が「onago.jpg」だったら、「onago_f2.jpg」といったように、「_f2」を付ける。
PNGを・・・というコーナーですが、個人的にも使いたかったので、jpgもgifもOKOK.
「_f2」がどうしても嫌！って人は、iepngrollover.js の1行目の overImg の値を書き換えましょう。Fireworks野郎的には、_f2が楽ちん。

透過PNG

PNG画像のimgタグに、class="png" を設定するだけ。

透過PNGをロールオーバーしたければ、class="png rollover" のように2個指定すればOKOK.

サンプル

面倒くさいので、最近サンプルで使用した画像を再利用。

「その１」～「その３」は、透過PNG＋ロールオーバー。（class="png rollover"）

「rollover jpg」は、jpg＋ロールオーバー。（class="rollover"）

「透過PNG置いただけ」は、単なる透過PNG置いただけ。（class="png"）

ソースがカッコ良くないような気がするが、これが俺様の実力。
まあまあ使いやすいのではないか、と思う訳です。

JavaScript関連リンク

サイト

Binbo-Special > 技術情報らしきもの > JavaScript
当サイトです。
OPEN SPACE様
様々な情報がありますが、javascript関連のリファレンスも充実しています。
JQUERY日本語リファレンス
jQueryに関するリファレンスサイト。見やすい！です。

書籍

Prototype & script.aculo.us JavaScriptライブラリによるAjaxアプリケーション開発
読み途中ですが、なかなか面白いです。
jQueryで作る Ajaxアプリケーション
jQueryに興味を持ったら読んでみるのも吉。

2008/10/30

▲一番上へ