IT戦記 このページをアンテナに追加 RSSフィード Twitter

2007-02-06

僕も半透明 png を使うためのライブラリ作った!

いろいろと古い IE で半透明 png を使うための JS が紹介されています

で、自分も使おうと思ったのですが。

ライブラリの依存とか、 window の load イベントの時に処理されるのがちょっとだけ嫌だったので、自分用のを作りました。

意外と便利だったので公開します

デモ(IE5.5 or IE 6 で見てください)

http://usrb.in/amachang/static/AlphaLoader/demo.html

使いかた
ダウンロードして使いたい場合

以下の二ファイルを同じディレクトリに置く

<img src="hoge.png" width="100" height="100"><!-- ← こいつは透過される -->
<script src="http://usrb.in/aj/apng.js"></script>
<img src="fuga.png" width="100" height="100"><!-- ← こいつは透過されない -->
<img src="piyo.png" width="100" height="100"><!-- ← こいつは透過される -->
<script src="http://usrb.in/aj/apng.js"></script>
詳しい情報は

http://usrb.in/amachang/wiki/AlphaLoader

McguffinMcguffin 2007/11/30 10:20 はじめまして。

グラデーションを使った表現がしたくて半透明 pngを使ってみたのですが、実際使ってみてわかったのは、表現の幅がすごく広がるんですね。
あとからいくつも、ここはこうしてみよう、ああしてみようと、いろんなアイデアが浮かんできて、サイトのデザインを見直すいい機会となりました。
結果、大工事になってしまいましたが、今まで無意識に妥協していたことが、いくつも解決されたように思います。
これも、amachangさんのライブラリのおかげです。
ありがとうございました。

気付いたことがありますので、御報告しておきます。
今まで、クリッカブルマップのイメージに透過 gifを使っていたのですが、今回、半透明 pngに変更し、紹介されてるライブラリを使わせてもらいました。
透過 gifを使っていたときは、IEで、クリッカブルマップの上で右クリックすると、「リンクを新しいウインドウで開く」などのメニューを選択できたのですが、半透明 pngに変えてからは選択できなくなりました。
解決方法としましては、半透明 pngの上に、不透明部分がまったくない透過 gifを重ねて配置し、クリッカブルマップはその透過 gifの方に指定してやると、上手く行くはずです。

同様の使い方を考えてる方の参考になればと書き込みました。
ありがとうございました。

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。