 |
|
|
|
|
 |
|
|||
 |
 |
 |
|
|
|
| このページをソーシャルブックマークしてみんなに紹介する！ --> |  |
 |
 |
 |
 |
 |
 |
 |
 |
ホームページ掲載の画像を取られない方法
ホームページ掲載の画像をダウンロードされないようにしたい場合どうしていますか？
よく見かける一番簡単な方法は「右クリックを禁止する」という方法です。
右クリックを禁止する方法
＜ 右クリック禁止サンプルページ ＞
- <body oncontextmenu="return false">
メッセージを表示させるには以下のようにします。 ＜ 右クリック禁止サンプルページ ＞
- <body oncontextmenu="alert('右クリック禁止'); return false;">
しかしこれでは、ドラッグすればダウンロードすることができてしまいます。
次に考えられるのが、クリックイベントで別の動作をさせることでダウンロードを防ぐ方法です。
つまりクリックでウィンドウを開き、開いたウィンドウではクリックでウィンドウを閉じるという方法です。
クリックでウィンドウを開く方法
＜ クリックでウィンドウを開くサンプルページ ＞
ヘッダ（ <head> 〜 </head> の間 ）に以下を書きます。
- <script language="JavaScript" type="text/JavaScript">
- <!--
- function imgOpen(str,w,h){
- window.open(str,'','status=0,location=0,scrollbars=0,resizable=0,
toolbar=0,directories=0,menubar=0,width='+w+',height='+h); - }
- //-->
- </script>
画像タグのクリックイベントで上記スクリプトを呼びます。
- onclick="imgOpen('006_3s.html',500,375);"
oncontextmenu="imgOpen('006_3s.html',500,375); return false;"
呼び出された画像ページの方はクリックイベントでウィンドウを閉じるスクリプトを書きます。
- onclick="window.close(); return false;" oncontextmenu="window.close(); return false;"
しかしページのソースを見て直接画像を呼び出せば画像が取得できてしまいます。
そして考えたのが、透明画像を上に乗せて右クリックやドラッグで画像を取ろうとしても透明画像が取られるだけで、目的の画像を守ることができます。
これも取ろうと思えば取られますが、すぐには仕組みが分からないので抑止には効果があると思います。
（って、ここで公表してはバレバレですが）
まずはサンプルをご覧下さい。
＜ 透明画像で保護する方法のサンプルページ ＞
右クリックやドラッグで画像を取得しても、１ピクセルの透明画像が取れるだけで「あれっ？」ってことになりませんか？
取得ができないと「何かプロテクトしているな！！」って思いますが、画像自体取得できるわけなので、ある程度抑止になると思いませんか？
透明画像を上に乗せる方法
１．spacer.gif という 1px × 1px の透明画像を用意する
（名前は何でも構いませんが、それらしい名前にした方がばれにくい）
２．画像を配置するところに通常通り配置する要領で透明画像を配置し、スタイルを適用させます。
（クラス名は何でも構いませんが、ここではとりあえず img としています）
- <div id="img"><img src="images/spacer.gif" width="400" height="300" alt="ほにゃらら" /></div>
３．スタイルシートに本当に表示させたい画像を背景指定します。
- #img{
- width:400px;
- height:300px;
- background-image:url(../images/abc1.jpg);
- background-repeat:no-repeat;
- }
