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

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

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

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

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

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

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

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

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

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

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