超簡単にロールオーバー効果をつけるCSS

ブログメンバーのken.iから耳寄り情報が!何かと面倒な画像のロールオーバー効果ですが、これをCSSにて、しかもたったの2行の記述で実現する方法をご紹介します。

早速ですが、CSSを下記に記します。

a:hover img {
opacity:0.8;
filter: alpha(opacity=80);
}

たったのこれだけです。ロールオーバーされた際に、opacityプロパティを使って不透明度を下げています。また、IEはopacity非対応なので、IE専用のプロパティ、filterを使い、同じく不透明度を下げる・・という方法です。数字はそれぞれ、1と100に近づくほどロールオーバー効果が薄くなっていきます。

調べてみたところ、to-Rの西畑一馬さんが紹介されていました。さすがです!だいぶ手間減りますねーこれ!

タグ


2009 年 10 月 2 日 | コメント/トラックバック(0)|

カテゴリー:CSS Web全般 てるよし メモ

シンプルなソースでロールオーバーさせる方法(JavaScript使用)

ロールオーバーさせるには、色々な方法が存在しますが、個人的に一番使い勝手がいいと思ったものを紹介します。JavaScriptを使用したロールオーバーですが、これがまた大元のソースがシンプルになるのでイイカンジ。外部jsにでも入れておいて損はないとおもいます。

使い方は至って簡単。下記ソースを外部js化し、ロールオーバーさせたい画像の名前に_offを付加。ロールオーバー後の画像には_onを付加するだけです。

例)
ロールオーバー前の画像は
<img src=”sample_off.gif” />
ロールオーバー後の画像は
<img src=”sample_on.gif” />

これだけです。超お手軽!DreamWeaverのゴツイソースに嫌気がさしていた人は是非。下記サイト様で紹介されています。
ソース元:http://le-arche.jugem.jp/?eid=57

タグ


このページの先頭へ

イメージ画像