THE HAM MEDIA BLOG

画像や文字の透明度を利用したロールオーバー

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
透明
rollover
opacity
ロールオーバー
javascript
jquery
CSS

画像や文字の透明度を利用したロールオーバー

以前3種類のロールオーバーを紹介しましたが、
今回は透明度を使ったロールオーバーの紹介です。



CSSのopacityを使う

画像や文字に透明度をつけるためには、
CSSのopacityプロパティを利用します。

ただし、このプロパティはIEに対応していないので、
IE対策用にfilterも指定します。

●画像を透明度の変化でロールオーバー

・HTML

<a href="#"><img src="rollover.gif" class="css-hover" /></a>

・CSS

a img.css-hover{
opacity:0.4;
filter: alpha(opacity=40);
}
a:hover img.css-hover{
opacity:1.0;
filter: alpha(opacity=100);
}

・プレビュー

ロールオーバーサンプル

●文字を透明度の変化でロールオーバー

・HTML

<p class="css-hover"><a href="#">ロールオーバー</a></p>

・CSS

p.css-hover a{
display:block;
width:150px;
padding:0.5em;
opacity:0.6;
filter: alpha(opacity=60);
background:#909090;
text-align:center;
color:#000;
}
p.css-hover a:hover{
opacity:1.0;
filter: alpha(opacity=100);
}

・プレビュー

これだけで透明度のロールオーバーができるので、
簡単に設定したい時は使えると思われる。

jQueryを使うと滑らかにロールオーバーするので、
そのサンプルも載せておく。

jQueryを使って透明度をだす

●画像

・HTML

<a href="#"><img src="rollover.gif" class="jquery-hover" /></a>

・JqvaScript(jQueryを読み込んでいること)

$(document).ready(function(){
$("img.jquery-hover").fadeTo(0,0.4);
$("img.jquery-hover").hover(function(){
        $(this).fadeTo(500,1.0);
    },
    function(){
        $(this).fadeTo(500,0.4);
    });
});

・プレビュー

ロールオーバーサンプル

●文字

・HTML

<p class="jquery-hover"><a href="#">ロールオーバー</a></p>

・JqvaScript(jQueryを読み込んでいること)

$(document).ready(function(){
$("p.jquery-hover").fadeTo(0,0.4);
$("p.jquery-hover").hover(function(){
        $(this).fadeTo(500,1.0);
    },
    function(){
        $(this).fadeTo(500,0.4);
    });
});

・プレビュー

jQueryのfadeToで時間を変えれば、
早く変化させることも、遅くする事も可能なのなのです。
場面によって使い分けてみてください。



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。