MD.WEBLOG

長野県飯田市、フリーランス、ウェブデザイン、ホームページ制作、CMS構築、映像制作、エディトリアルデザイン - MITAMA DESING -

Go To Home

Blog

blogトップ > Java script > 右クリック禁止の方法色々【jquery、java script】


右クリック禁止の方法色々【jquery、java script】

 2012年11月29日   タグ: , , , ,

右クリック禁止の方法色々【jquery、java script】
肖像権の問題などで、右クリックを禁止して、画像の保存を防ぎたいということもあると思います。 その方法をいくつかまとめて紹介します。

java scriptで右クリックを禁止する

とても簡単です。右クリックを禁止したい範囲のタグに以下のコードを追加するだけです。

画像の右クリックを禁止
<img src="画像のパス" onContextmenu="return false" />
デモページはコチラ

警告を出す場合

<img src="画像のパス" oncontextmenu="alert('右クリック禁止');return false" />
デモページはコチラ

jqueryで右クリックを禁止する

以下のコードをheadタグ内に記述します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>  
<script type="text/javascript">  
$(function() {
	$(".noclick").bind('contextmenu', function(e) {
		return false;
	});
}); 
</script>

右クリックを禁止したい画像に「noclick」というクラスを追加します。

<img src="画像のパス" class="noclick" />
デモページはコチラ

警告を出す場合

警告を出す場合は以下のコードを headタグ内に記述します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>  
<script type="text/javascript">  
$(function() {
	$(".noclick").bind('contextmenu', function() {
    alert('右クリック禁止');
	return false;
	});
}); 
</script>

警告なしの場合同様に、「noclick」というクラスを追加します。

デモページはコチラ

しかしながら、これらの方法では、画像をデスクトップにドロップ&ドラッグした時に画像を保存することが可能です。 右クリック禁止ではないですが以下のjqueryプラグインで画像のダウンロードを防ぐことができます。

jqueryプラグイン「jquery.dwImageProtector.js」で画像を保存できないようにする

jqueryプラグイン「jquery.dwImageProtector.js」を導入すると以下のことを禁止できます。

・右クリックで保存

・右クリックで背景に設定での保存

・右クリックで背景画像の表示

・デスクトップに画像をドラッグ&ドロップして保存

右クリックを禁止するわけではないので、右クリックメニュー自体は表示されて保存できますが 目的の画像ではなくて、blank.gifという透明の画像が保存されます。 blank.gifでふたをしているイメージです。

「jquery.dwImageProtector.js」の使い方

「jquery.dwImageProtector.js」をダウンロードして、jqueryとともに外部ファイルとしてHTMLファイルに読み込みます。

「jquery.dwImageProtector.js」のダウンロードはこちら

head内に以下のコードを記述します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.dwImageProtector.js"></script>  
<script type="text/javascript">  
    $(window).bind('load', function() {  
        $('img.protect').protectImage();  
    });  
</script> 

画像に以下のクラスを追加します。

<img src="画像のパス" class="protect" />

blank.gifをHTMLファイルと同じ階層にUPします。

デモページはコチラ
サンプルダウンロードはこちら

「jquery.dwImageProtector.js」は、デフォルトでは、blank.gifに赤のボーダーが入ってしまいます。 サンプルではスタイルを指定している部分をコメントアウトして、ボーダーラインが表示されないようにしています。

jquery.dwImageProtector.js
jQuery.fn.protectImage = function(settings) {
	settings = jQuery.extend({
		image: 'blank.gif',
		zIndex: 10
	}, settings);
	return this.each(function() {
		var position = $(this).position();
		var height = $(this).height();
		var width = $(this).width();
		$('<img />').attr({
			width: width,
			height: height,
			src: settings.image
		}).css({
			//border: '1px solid #f00',
			top: position.top,
			left: position.left,
			position: 'absolute',
			zIndex: settings.zIndex
		}).appendTo('body')
	});
};
このエントリーをはてなブックマークに追加

  |  Blog TOP   |