spoiler:画像やテキストをモザイク・ぼかし表示してくれるjs



該当箇所の画像やテキストをモザイク・ぼかし効果で表示させる方法です。

1.CSSの記述例

以下は任意です。

<style type="text/css">
<!--
#idWrap{
	width:700px;
	margin:0 auto;
}

p{
	padding:20px;
	font-size:14px;
	text-align:center;
}
-->
</style>

2.JavaScriptの記述例

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="spoiler.js"></script>
<script type="text/javascript">
$(function(){
	$('spoiler').spoilerAlert();	//ぼかしを入れるタグ
	$('.spoiler').spoilerAlert({max: 20, partial: 6});	//ぼかしを入れるタグのclass名
});
</script>

3.HTMLの記述例

	<p><spoiler>どうですか?モザイク or ぼかしのテキストが表示されましたか?</spoiler></p>
	<div align="center"><img src="/wp-content/plugins/wp-ogp/default.jpg" alt="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN" class="spoiler"></div>

画像やテキストをモザイク・ぼかし表示するデモ

ソース元:SPOILER ALERT!
IEには対応してない様ですね。(対応ブラウザはChrome、FireFox、safari)

html上でフォトショやイラレの効果的なことが出来るって感じですが、
どんな時に使えば良いのか悩みどころです。