コーディングメソドロジー

第55回 ロールオーバー時の透過処理とその注意点

今日クリックできる画像にロールオーバー設定することは一般的となっています。中でもCSSやJavaScriptを用いて、ロールオーバー時に画像を透過処理する方法は、ロールオーバー用の画像を準備することなく、簡単に画像に変化を与えることが可能なのでとても便利です。今回はCSSとJavaScriptで透過処理する方法とその際の注意点をご紹介いたします。

CSSを用いた場合の記述例
「btn_home01.gif」という画像をロールオーバーで透過する場合、IE6以下ではhover擬似クラスが<a>以外には適用されないため、画像を囲む<a>要素にclassを指定します。(01
CSSにはopacity非対応のIE6/7/8に適用するため、filterプロパティをあわせて記述します。
「opacity」は0(透明)~1.0(不透明)、「alpha」は0(透明)~100(不透明)の間で数値を指定することが可能です。
さらにfilterプロパティはhasLayoutがfalseのときは動作しないため、「zoom: 1;」を入れておくと良いでしょう。 (02

01 HTMLソース

01 HTMLソース

02 CSS

02 CSS

JavaScriptを用いた場合の記述例
JavaScriptを用いて記述する場合には、画像に直接classを指定することも可能です。(03
今回はjQueryのAPI「hover」と「fadeTo」を使用して、CSSのopacityと同様の効果を再現します。
hover」は、マウスが上に乗った時に一番目の命令を実行し、マウスが外れた時に二番目の命令を実行します。
fadeTo」は、要素の透明度を変化させる効果を与えます。
速度は「slow」「normal」「fast」もしくは完了までの時間をミリ秒単位で、透明度は0(透明)~1.0(不透明)の間で数値を指定することが可能です。(04

03 HTMLソース

03 HTMLソース

04 JavaScript

02 JavaScript

透過処理を行う場合のデザインにおける注意点
画像に透過PNGを使用する場合、前述の方法では、IE7/IE8で画像の縁が黒くなりきれいに表示されません。(05
しかしjQueryのプラグイン「jquery.belatedPNG.js」を使用することで、IE7/IE8で画像をきれいに表示させるとともに、透過PNGに対応していないIE6でも同様の表示をさせることが可能です。
また、画像の下にある背景に模様が入っていたり、透過する画像と背景が同じような色の場合には、画像に透過処理を施しても期待するような効果が得られないことがあるので注意が必要です。(06

05 IE7/IE8で透過PNG画像を使用した場合

05 IE7/IE8で透過PNG画像を使用した場合

06 背景に模様が入っている場合

06 背景に模様が入っている場合

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム