JQueryを使用して色々な図形で画像にマスクをかける方法

2015.2.27 (金)
main_catch

JQueryを使用して色々な図形で画像にマスクをかける

画像を円形やらで切り抜いてwebページに表示させる場合、普通はフォトショップなどを使って加工してページに表示させると思いますが、今回はJQueryを使って画像にマスクをかける方法をご紹介します。元ネタはコリスさんのこちらの記事になります。

使用する画像の準備

画像は全部で3枚必要になります。全て同じサイズで作成します。今回のサンプルは円形で作成しますが、三角でも星形でも何でもいけちゃいます!!

img_sample
元画像
サイズ:310×310
on_sample
マスク用画像(※透過PNG画像)
サイズ:310×310
hover_img_sample
オンマウス用画像(※透過PNG画像)
サイズ:310×310

HTML,CSS,コーディング

HTML

JQueryを使用しますのでにJQuery本体を読み込んで下さい

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>

ロールオーバーとマスク用に2つの空span要素を元画像の上に配置します。

<a href=”#” class=”item”>
<span class=”rollover”></span><!–hover用のspan–>
<span class=”gallery-shadow”></span><!–マスク用のspan–>
<img src=”images/sample.jpg”/>
</a>

CSS

ロールオーバーとマスク用の画像は、それぞれの背景画像として指定(※画像のサイズは適宜変更されて下さい)

a img {
border:none;
}

a.item{
position:relative;
display:block;
height:310px;
width:310px;
float:left;
}

a.item .gallery-shadow{
display:block;
position:absolute;
top:0%;
left:0%;
width:310px;
height:310px;
background:url(images/gallery-shadow.png);
}

a.item .rollover{
display:block;
position:absolute;
top:0%;
left:0%;
width:310px;
height:310px;
background:url(images/gallery-rollover.png);
}

ここまで書くと想像しやすいと思いますが、イメージとしてはこんな感じです。フォトショ・イラレのレイヤーと同じ感覚だと思って頂いて問題ありません。

image

JavaScript

下記コードをhead内または外部jsで記述(※必ずJQuery本体の読込みより後で記述して下さい)

$(document).ready(function(){
$(“.rollover”).css({‘opacity’:’0′});
$(‘#gallery a.item’).hover(
function() {
$(this).find(‘.rollover’).stop().fadeTo(500, 1);
},
function() {
$(this).find(‘.rollover’).stop().fadeTo(500, 0);
}
)
});

完成サンプル

a1180_017023

IE8以下への対応

JQueryのfadeはIE8以下のverでは挙動がおかしくなります。IE8だけではありますが、対処法を下記に追記しておきます。

jQuery.belatedPNG.jsを使う

jQuery.belatedPNG.jsを使用することでIE8で透過png+fadeを使用できるようになります。(jQuery.belatedPNG.jsは正確にはIE6に透過pngを理解させる物になります。IE8は普通に透過pngは使用できるのですが、JQueryのfadeと組み合わせると不具合を起こすんです・・・)配布元

fadeの効果をやめる

これが一番手っ取り早いです。(笑)ただ、フェードアニメーションが無くなるので少しさみしくなります・・・。

フェード効果なしJavaScript

$(document).ready(function(){
$(“.rollover”).css({‘opacity’:’0′});
$(‘#gallery a.item’).hover(
function() {
$(this).find(‘.rollover’).stop().fadeTo(0, 1);
},
function() {
$(this).find(‘.rollover’).stop().fadeTo(0, 0);
}
)
});

ハイライトされている5,8行目が元々のコードとの差分がある所になります。

完成サンプル2(フェード効果無)

a1180_017023

ワードプレスの記事のアイキャッチ等にこの手法を使えば、画像処理の出来ないお客様でも画像の加工を行うことが可能になります。このように、ニワカソフトでは様々な手法を駆使しお客さまにとって最善なホームページのご提案を致しております。ホームページの新規作成・リニューアル等をお考えの際はぜひ、ニワカソフトにおまかせ下さい!!