jQuery+透過PNGでロールオーバー

改造人ツクルダー

以前作成したロールオーバーをさらにシンプルに作り直してみた。


用意するもの:

・ロールオーバーさせたい画像

・1ピクセルx1ピクセルの半透明PNG画像

・1ピクセルx1ピクセルの100%透過PNG画像

・下記のスクリプト


基本的な考え方は以前のものと同じ。

ロールオーバーさせたい画像を、スタイルシートでimg要素の背景画像として配置する。src属性には100%透過PNG画像を指定、マウスオーバー時はsrc属性の画像を半透明PNGと入れ替えることで(元画像に半透明PNG画像を重ねる)、ロールオーバー効果が得られる。


動作サンプル

jQuery    
$(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);
}
);
});
});


HTML    
<a
href="hogehoge.html"><img
src="hogehoge.jpg"
/></a>


このスクリプトでは、リンクが設定されている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)をセットする。

元画像に透明画像が重なりロールオーバーが解除されたように見える。