jQuery+透過PNGでロールオーバー
以前作成したロールオーバーをさらにシンプルに作り直してみた。
用意するもの：
・ロールオーバーさせたい画像
・1ピクセルx1ピクセルの半透明PNG画像
・1ピクセルx1ピクセルの100%透過PNG画像
・下記のスクリプト
基本的な考え方は以前のものと同じ。
ロールオーバーさせたい画像を、スタイルシートでimg要素の背景画像として配置する。src属性には100%透過PNG画像を指定、マウスオーバー時はsrc属性の画像を半透明PNGと入れ替えることで（元画像に半透明PNG画像を重ねる）、ロールオーバー効果が得られる。
動作サンプル
$(function(){
$('a img').each(function(){
var img_url = $(this).attr('src');
$(this).hover(
function(){
var img_h = $(this).outerHeight();
var img_w = $(this).outerWidth();
$(this).attr('src','rollover_on.png');
$(this).css('background-image','url('+img_url+')');
$(this).css('height',img_h);
$(this).css('width',img_w);
},
function(){
var img_h = $(this).outerHeight();
var img_w = $(this).outerWidth();
$(this).attr('src','rollover.png');
$(this).css('background-image','url('+img_url+')');
$(this).css('height',img_h);
$(this).css('width',img_w);
}
);
});
});
このスクリプトでは、リンクが設定されているimgタグ（aタグ内のimgタグ）すべてに同じロールオーバーが適用されるので、すでに公開しているサイトでもclassやidを再設定する必要なしでロールオーバーが可能。もちろん特定のclassやidを指定しても良い。
マウスオーバー時の流れ：
img要素src属性のURLを取得
↓
画像のサイズを取得
↓
半透明PNG画像（rollover_on.png）をimg要素src属性へセット
↓
元画像URLをスタイルシートでimg要素の背景画像としてセット
↓
img要素をスタイルシートで元画像のサイズへ拡大
元画像の上に半透過PNG画像が重なり、ロールオーバー効果が得られる。
マウスアウト時はimg要素の背景画像が透けて見えるよう、src属性へ100%透過PNG画像(rollover.png)をセットする。
元画像に透明画像が重なりロールオーバーが解除されたように見える。