jQueryでする透過を使ったスムーズなロールオーバーが
なかなか便利そうなのでメモ
サンプル

ダウンロード

まずはいつものように、
jquery.js
http://jquery.com/
をダウンロードし、head内に読み込みます。

<script src="js/jquery.js"></script>

あとは

(function($) {
	$.fn.jsRollver = $(function() {
		$.hamFunction.opacityRollOver({
			fnClass:'.over',	/*適応させる部分の変更(,区切りで複数指定可)*/
			opacityDef:1.0,		/*デフォルトの透明度指定*/
			fadeTime:200,		/*フェードの時間指定*/
			opacityOn:0.6,		/*マウスオーバー時の透明度の指定*/
			opacityOff:1.0		/*マウスアウト時の最初の透明度の指定*/
		});
	});
	
	$.hamFunction = {
		opacityRollOver: function(options){
			var c = $.extend(options);
			$(c.fnClass).each(function(){
				$(this).css('opacity',c.opacityDef).hover(
					function(){
        				$(this).fadeTo(c.fadeTime,c.opacityOn);
        			},
    				function(){
        				$(this).fadeTo(c.fadeTime,c.opacityOff);
   					}
   				)
			});
		}
	};
})(jQuery);

上記ソースを

<script src="js/jquery.js"></script>
OOO

OOOの部分に直接記述するか、外部ファイルとして読み込ませれば準備完了!

使い方

あとは

<p class="over"><a href="#"><img src="images/btn2_off.jpg" width="200" height="60" /></a></p>
<p class="over">テキスト</p>

のようにロールオーバーを適用させたい箇所に
上記プログラム内で指定したクラス名(ここでは.over)を指定してあげればOK。

このスクリプトの良いところは
テキストにも適用可能という点です。

参考サイト

jQuery勉強メモ:画像や文字の透明度を利用したロールオーバーをプラグイン化してみた