ダリの雑記：WEBプログラム版

この記事は1年以上前の記事のため、内容が古い可能性があります。

メモ

画像のロールオーバーは、Javascriptを使うと楽です。特にCSS HappyLifeさんのサイトの

smartRollover.js

なんかは非常に簡単にロールオーバーを実現できます。

ただ画像のロールオーバーといっても、明度が上がる程度のものであれば、わざわざ２枚用意するのも面倒です。

そういう場合はスタイルシートで解決しましょう。

１．imgタグを囲んだaタグに「class="opacity"」を記述します。

<a href="#"  class="opacity"><img src="hoge.jpg" /></a>

２．スタイルシートに以下を記述します

a.opacity{
   background-color:#FFF;
   display:inline-block;
}

a.opacity:hover img,
a.opacity:active img{
    -moz-opacity:0.7;
   opacity:0.7;
   filter:alpha(opacity=70);
}

要するに、画像の透明度を上げて、白の背景色と混ぜ合わせれば明るく見えるというわけですね。

■サンプル（明るく：background-color:#FFF;）

反対に暗く見せたい場合は、背景色を暗くすれば良いので、「a.opacity」の「background-color」を「#000」にしてください。

■サンプル（暗く：background-color:#000;）

その他の色についても、背景色の設定次第で様々なバリエーションが可能です。

■サンプル（赤：background-color:#F00;）

■サンプル（緑：background-color:#0F0;）

■サンプル（青：background-color:#00F;）