画像を矩形以外の形状で表示したい人のためのチュートリアル

Post on:2011年10月20日

画像にPNGマスクを使用して、ブラシストローク状、サークル状など、矩形とは異なる形状で表示するチュートリアルを紹介します。

デモのキャプチャ

PNG Masking: How to Dynamically Shape Any Image on Your Website

[ad#ad-2]

デモ

デモでは、画像をブラシストローク状に表示しています。

デモのキャプチャ

デモページ

もう一つのサークル状のデモは、下記ページのギャラリーのサムネイルとして使用されています。

画像の枚数が少ないのであれば個別に画像を作成してもよいかもしれませんが、このデモのように数多くあると、このテクニックを使用した方がより効率よく実装できます。

[ad#ad-2]

画像の作り方

画像は3種類が必要で、全て同じサイズにします。

  • ロールオーバー用の画像
    ※透過PNG画像
  • マスク用の画像
    ※透過PNG画像
  • ベースとなる画像
サイトのキャプチャ

ブラシストローク状に使用する画像3種類

サークル状のは、下記のようになります。

サイトのキャプチャ

サークル状に使用する画像3種類

制作：HTML, CSS, JavaScript

HTML

ロールオーバーとマスク用に2つの空span要素を使用します。

<a href="images/gallery-full.jpg" class="item">
<span class="rollover"></span>
<span class="gallery-shadow"></span>
<img src="images/gallery-thumb.jpg"/>
</a>

CSS

ロールオーバーとマスク用の画像は、それぞれの背景画像として指定します。

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

JavaScript

「jquery.js」を外部ファイルとして、下記のスクリプトを記述します。

<script type="text/javascript">
$(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);
		}
	)
});
</script>

sponsors

top of page

©2024 coliss