ゲームやプログラム技術情報等満載？？Binbo-Special

HOME > 技術資料 > JavaScript > IE6でもPNGで透過したいし簡単にロールオーバーさせたい

 

IE6でもPNGで透過したいし簡単にロールオーバーさせたい

解決法その１：IE6を抹殺

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

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

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

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

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

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

iepngfix.js

iepngfix.js という有名なjsがありますので、まず前提としてこちらを使用します。
2009.09.02追記：iepngfix.jsの元サイトがお亡くなりになられているように見えますね・・・・・代替手段(DD_belatedPNG.js)を用いるか、Binbo-Specialに置いているiepngfix.jsを使ってみるとかしてみてください。

このソースの前半に、
blank: 'http://www.isella.com/aod2/images/blank.gif',
という部分があるのですが、これは「透明GIF」です。透明GIFと組み合わせてPNGを正しく表示させるハック？なので、この透明GIFは自分のサーバにおいて、パスは書き換えた方が、将来的に良いですね。
2009.09.02追記：上記透明GIFへのアドレスがお亡くなりになられているように見えますね・・・・・と言うわけで単なる透明GIFを代わりに用意してパスを書き換えれば良い、だけなのですが、透明GIFの作り方が分からない方は、Binbo-Specialに置いてある透明GIFを使ってみるとかしてみてください。

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

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

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

横着でごめんなさい。

iepngrollover.js

var overImg = '_f2'; var ua = navigator.userAgent; if(ua.indexOf("MSIE") != -1 && ua.indexOf("6.0") != -1) { var ie6 = true; } $(function(){ $('.png').each(function(){ var classes = $(this).attr("class"); if(classes.indexOf("rollover") != -1) { var imgout = $(this).attr("src"); var imgovr = imgout.replace('.png', overImg+'.png'); if(ie6 && IEPNGFIX) { IEPNGFIX.hover(this, imgovr); }else{ $(this).hover( function(){ $(this).attr("src", imgovr); }, function(){ $(this).attr("src", imgout); } ); } } else { IEPNGFIX.fix(this); } }); $('.rollover').each(function(){ var classes = $(this).attr("class"); if(classes.indexOf("png") == -1) { var imgout = $(this).attr("src"); var imgovr = imgout.replace('.gif', overImg+'.gif').replace('.jpg', overImg+'.jpg').replace('.png', overImg+'.png'); $(this).hover( function(){ $(this).attr("src", imgovr); }, function(){ $(this).attr("src", imgout); } ); } }); });

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"）

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

2009.08.18 追記

PNGを背景画像として使いたい＆背景画像でrepeatさせたい、という場合は、コチラの記事へ・・・・・→PNGを背景でrepeatさせたい時のIE6対策

関連項目

雑多なもの

• PNGを背景でrepeatさせたい時のIE6対策
• onloadイベントの呼び出しがhistory.backとかの時にブラウザ毎に挙動違うのが気になったので軽く調査
• 画像のフェードイン・フェードアウト（rico.js）
• 画像の上に画像を配置してフェード（透過）
• IE判定簡易版
• AjaxのresponseTextでSafariだけが華麗に文字化けする件
• FLASHの上に画像（レイヤー）を置きたい
• スムーズにページ内スクロールさせたい
• 半角英数の連続文字列を改行させたい
• フォームで条件によって項目を切り替え表示してみる
• jsファイルを動的に読み込む事について考える
• GoogleMapsがIEで表示されなかったりした場合

Ext.js

• とりあえずExt.js導入からダイアログ（アラート）表示までやってみる
• GridPanelを使ってXMLの内容を表示してみる
• GridPanelを使ってJSONの内容を表示してみる
• TreePanelを使ってみる

jquery

• IE6でもPNGで透過したいし簡単にロールオーバーさせたい
• 画像及びテキストのフェードイン・フェードアウト（jQuery）
• テーブルで1行毎に色を変えるアレ
• ちょっと変わったダイアログ的なものを表示する
• jQuery.jsとprototype.jsを同居させたい
• jquery.pager.jsを試してみる

lightwindow,greybox

• greyboxを試してみるでござる
• lightwindowを試してみるでござる
• lightwindowやgreyboxのFirefoxにおける問題点

SyntaxHighlighter

• ソースコードを見やすくきれいに表示（SyntaxHighlighter）
• SyntaxHighlighterのツールバーがマウスオーバーでずれる件
• SyntaxHighlighterの日本語化

特別企画「犯人はヤス」

• JavaScriptでゲームっぽいものを作ろう！その1
• JavaScriptでゲームっぽいものを作ろう！その2
• JavaScriptでゲームっぽいものを作ろう！その3
• JavaScriptでゲームっぽいものを作ろう！その4
• JavaScriptでゲームっぽいものを作ろう！その5（一応完了）

サイト

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

どう考えてもおすすめ書籍

▲一番上へ

ゲーム

• BomberBomber外伝2
• BomberBomber外伝
• リライトストーリー
• お姫様の憂鬱
• BomberBomber2

more

技術資料

• JavaScript
• PHP
• Perl
• HTML
• EC-CUBE
• JAVA
• FLASH
• AIR
• C/C++
• MySQL
• PostgreSQL
• Windows関連
• Linux系
• Apache
• MovableType
• Eclipse
• VisualStudio
• Access
• Excel
• PowerPoint
• InternetExplorer
• Firefox
• アルゴリズム

more

普段思った事をつらつらと

• 制作
• 雑記
• ネタ
• ゲーム
• 技術系

more

リンク

• ゲーム制作者向け情報系
• ゲーム制作者系
• フリーソフト・ゲーム紹介系
• サービス系
• その他リンク

more

カスコンテンツ

• ネタ
• サイト主はこんな人
• メール

Copyright© 1999-2010 どんきー All Right Reserved!