alphafilter.jsが透過pngのロールオーバーに対応

このエントリーをはてなブックマークに追加

IE6用の透過pngライブラリ「alphafilter.js」が透過pngのロールオーバーに対応しました。

透過機能はIE6で画像の拡張子がpngの場合のみですが、ロールオーバーはすべてのブラウザ、jpg、gif、png形式の画像で利用いただけます。

img要素の場合class属性に「btn」と付ければロールオーバーの処理を行います。

<img src="./sample.png" class="btn" alt="" />

sample.pngの場合はsample_on.pngのように拡張子の前に「_on」が付いた画像をロールオーバー時に表示します。

透過機能と合わせて利用する場合は、以下のように指定します。

<img src="./sample.png" class="alphafilter btn" alt="" />

シンプルなライブラリでいようと心がけていたのですが、透過png+ロールオーバーは個人的に非常にニーズの高い機能なので実装してみました。

関連エントリー

FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」
footerをウィンドウ下部に固定する『footerFixed.js』
ブロックレベル要素の高さを揃えるheightLine.js
ページ内リンクをスマートにするsmoothScroll.js
一番簡単な画像置換の方法-imageReplace.js-

スポンサードリンク

«現場のプロから学ぶXHTML＋CSS 増刷（6刷）決定 | メイン | ゼロからはじめるPHP入門講座 [東京]»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/953
コメント

ロールオーバーバージョンを早速ですが使わせていただきました。
一カ所バグらしきところを発見しましたのでご報告です。

XP IE7において発生した不具合です

グローバルナビなどで以下のようにコーディングしてボタンを横並びにすることが多いかと思います。


最初はliに対してfloat leftで並べていたのですが
ボタンが表示されないとう状況でした。
floatをやめてliに対してdisplay inlineにしたところ問題なく表示されました。

一つ質問ですが、pngを使う場合は透過させるのが現状では主目的になると思いますが。ボタンロールオーバーでテキスト以外を透過させた場合、ロールオーバーの反応領域はどのようになっておりますか？
ボタンとしてクリック領域は画像の四角いエリアになっているようですが、ロールオーバーに反応する領域は少し違うようでしたので。
firefoxなどでは画像の四角いエリアでクリック領域と同じなのですが、IEなどでは透過されていない部分のみが反応するエリアなような感じなのですが。
細い文字でボタンを作った場合には反応領域が狭過ぎて、チカチカしてしまうことがあります。

投稿者:kam | 2009年5月12日 15:25

とにかくスマートで速くてたすかりました。
ありがとうございました。

投稿者:sato | 2009年10月24日 22:53
コメントを投稿