| ブログトップ | CSS関連 | JavaScript関連 |

お手軽ロールオーバー

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

メモ

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

smartRollover.js

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

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

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

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

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

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

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;)

日々の生活にhappyをプラスする|ハピタス

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

LINEで送る

トラックバック

トラックバックURL

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL
Copyright(c) 2010 - 2017 ダリの雑記