透過PNGを使ったウェブデザイン。
背景画像を使ったマウスオーバーボタンを作りたいときのアクセシビリティ対策、SEO対策としても重宝してます。
使い方としては背景画像で以下のような画像を使用します。
CSSでマウスオーバー時に背景画像を切り替えるソースを記述します。
たとえば、以下のような典型的ソース。
li a#hoge { background:url(背景画像名.jpg) 0 0 no-repeat; }
li a:hover#hoge { background:url(背景画像名.jpg) 0 -38px no-repeat; }
今までだとこの画像に文字も入れておいて、CSSでtext-indent:-9999px;とか記述してしまうのですが、そうすると画像を表示していないときには何も読めなくなってしまいます。
かといってGIF画像ではエッジが綺麗に表示できないので困ってしまいます。
そこで、その上に乗せるテキストを透過PNG画像で作成します。
ALTに説明を記述できるので、画像を表示しない設定のアクセシビリティ対策も安心です。
サンプルが掲載できないので後日、アップ時にアドレスを載せます。
一応こちらでも使ってはいますがロゴやテキストの背景はOKで、ボタンだけエラーになっております。。。
http://www.exdesigning.net/
さて、問題はインターネットエクスプローラー。
IE7は余裕で表示できるのですが、IE6は透過処理が出来ません。
白くなってしまって悲しいことになります。
そこで、IE6で表示させるためのJavascriptを使用します。
今回使用したのは以下のライブラリ。
PNG Behavior
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
IE PNG Fix
http://www.twinhelix.com/css/iepngfix/
まだ、IE PNG Fixに関しては、使いこなせているとは言えないので、
書き方に関しては研究して、また記事を書こうと思っています。
どちらにも共通するのはパスの書き方が難しいと言うことです。
HTMLからのパスを記述しないと動きません。
FLASHでパスを書くときに似ています。
あと、どちらも「blank.gif」をアップロードして適切なパスを書かないと
動かないので注意が必要です。
これがないと×（バツ）印が画像に表示されてしまいます。
日本のサイトでも透過PNGを使ったサイトが増えてきているので
定番になっていくのだろうと思っています。
今回は使用しませんでしたが、タミヤのサイトのようにプルダウンが
透明で下が見えると、かなりお洒落だなーと思います。
http://www.tamiya.com/japan/index.htm
Comments
Add Comment