画像のダウンロード抑止を設定

透過画像を重ねて画像のダウンロード抑止

画像に重ねる透過画像(filter.png)を用意。

jQuery

$(function () { // 画像読み込み $('img').on('load', function(){ // フィルタ画像 var filter = $('<img>').attr('src', '/img/filter.png').css({ 'width': $(this).width(), 'height': $(this).height() }).addClass('filter'); // 透過画像を直前に差し込み $(this).before(filter); }).each(function() { // IEキャッシュ対応 if (this.complete) { $(this).load(); } }); });

CSS

.thumb { position: relative; top: 0; left: 0; } .filter { position: absolute; top: 0; left: 0; }

HTML

<div class="thumb"><img src="/img/thumb01.jpg"></div> <div class="thumb"><img src="/img/thumb02.jpg"></div> <div class="thumb"><img src="/img/thumb03.jpg"></div>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。