/*
------------------------------------------------------------
ライセンス
------------------------------------------------------------
Copyright c 2009～ sora-design All Rights Reserved.
無断使用を禁じます。


*/

//━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
//右クリックで画像を保存させない　改良版
//━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
/*
//------------------------------------------------------------
//解説
//------------------------------------------------------------
「画像を右クリックで保存できないようにしたい」
という要望がある。
webデザイン的には無意味、バッドノウハウでも、
要望があってどうしようもない時もある。

このとき、一昔前の対応だと、
bodyのoncontextmenuに「return false」を入れてしまう方法。
しかし、これだと全ての対象が右クリックできなくなってしまう。
場合によってはテキスト、住所、メアドなど、
ユーザーにとって有益な情報まで右クリックできなくなってしまう。

そんな時に、imgタグだけに適応すればいい、という発想。
対象はjQueryで絞ってあげればいくらでも応用できる。
指定id以下のimgとか、専用のclassをXHTML内に書いてあげるとか。




　・ミスティーネット･JavaScript講座
　　http://java.misty.ne.jp/click.html

oncontextmenu="alert('右クリックは禁止です。');return false;"



後から090314に見つけた例
　・jQueryを使って右クリックメニューを禁止する方法 - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
　　http://www.ideaxidea.com/archives/2009/03/how_to_disable_right_click_menu.html

$(document).ready(function(){
  $(document).bind("contextmenu",function(e){
    return false;
  });
});


$(function (){
	$("body").bind("contextmenu",function(e){
		return false;
	});
})





//------------------------------------------------------------
*/


//------------------------------------------------------------
//jQuery　実行
//------------------------------------------------------------
$(function (){
	noSaveImg_fnc("img")
	//noSaveImg_fnc("#contents img")
	//noSaveImg_fnc("#contents_absolute img")
})




//------------------------------------------------------------
//img画像だけ、右クリック禁止
//------------------------------------------------------------
//「oncontextmenu」は属性じゃない、イベントハンドラ。
function noSaveImg_fnc(target_noSaveImg){
	//仕方が無いのでeachで設定。ポイントは[0]だ。
	$(target_noSaveImg).each(function (){
		$(this)[0].oncontextmenu = function (){
			//alert(target_noSaveImg+'　の上は右クリックは禁止です。');
			return false;
		}
	})
}
	
	
	

//------------------------------------------------------------
//【実験中】imgの上に、同じサイズの別画像を被せる
//------------------------------------------------------------
/*
実験ほぼ完了。
画像の上に、透明画像を被せてしまう方法。
右クリックで保存できたようにみせて、
実際は保存できてないってこと。
昔フリッカーで同じようなもの見た気がする。

けど、これも技術と知識があれば根本的な問題解決にはならないんだけどね。
no-cacheとか、バラバラにした画像を、並べて配置するとか？
でもプリントスクリーンされたら一発アウトなんだけどね。。。

どこまでクライアントに説明するかも難しい。



------------------------------
090317
------------------------------
もういっこ考察
◆JavaScript ONじゃないと画像を見せない
　・CSSで消しておいて、JavaScriptで表示する
　・透明画像をimgのsrcにそのまま代入すれば、消せる。
　　消す前のimgのsrcを取得しておいて、背景画像に設定する。
　　imgって背景画像使えるのか？
　　透明画像でなくても、jQueryで透明にしておけばそれでもいいか。


*/




function imgCoverImg_fnc(){
	$("img").wrap("<span></span>");
	$("img").before("<span><img /></span>");
	$("img").parent().each(function (){
		$(this).css({
			position:"relative"
		})
	})
	
	$("img").prev().each(function (){
		$(this).css({
			width:$(this).next().width(),
			height:$(this).next().height(),
			display:"block",
			position:"absolute",
			top:"0",
			left:"0"//,
			//backgroundColor: "#FFFF00"
		})
		$("img",this).attr({
			src:"http://www.google.co.jp/images/nav_logo3.png"
		})
		$("img",this).css({
			width:"100%",
			height:"100%"
		})
	})
}
	
	
	
//------------------------------------------------------------
//━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━