Webの記録

右クリックで独自メニューを出して画像のコピーガード

投稿日:2011年5月2日 更新日:

この記事は約 4 分で読めます。

画像のコピーガードを3通り試しています。

今回は「右クリックで独自メニューを出す」方法を試してみました。

右クリック禁止で画像のコピーガード」、
透明画像を置いて画像をコピーガードする。」も良かったらご覧ください。

今回は、右クリックで独自メニューを表示させる為に、jQueryの「ContextMenu plugin」ライブラリを利用します。



設置方法。

  1. jquery.contextmenu.r2.jsをダウンロード
  2. html記述。
  3. 試しにdemoを作ってみました。


1.jquery.contextmenu.r2.jsをダウンロード

「jquery.contextmenu.r2.js」をダウンロードしておきます。
※参考http://www.trendskitchens.co.nz/jquery/contextmenu/

さて、下準備はオシマイ。
ここから、htmlファイルに記述していきます。

2.html記述。

ここからheaderの中。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.contextmenu.r2.js"></script>
<script type="text/javascript">
	$(function(){
		$(document).contextMenu("menu", {});
	});
</script>

そして・・・bodyの中。
ただし、id名は上記のcontextMenuメソッドの第1引数の名前と一致させないといけないです。(今回はmenu)

<div id="menu" class="contextMenu">
<ul>
	<li><a href="nemu1.html">menu1</a></li>
	<li><a href="nemu2.html">menu2</a></li>
</ul>
</div>
<!-- /#menu -->


3.試しにdemoを作ってみました。

・・・で、実際に試してみました。【右クリックで独自メニューを出して画像のコピーガードdemo
デモ画面が開けたら、画面内で右クリックしてみてください。

画面を右クリックした時のイメージ

画面を右クリックすると、liの中のメニューだけが表示されました。
画像の保存をする表示が右クリックに出ないので、一応画像のコピーガード対策になるかもしれません。(完全にガードは出来ない・・・けれど)
しかし、右クリックで表示するモノを工夫するとなかなか面白いかも・・・と思えました。

【画像コピーガードの関連記事】

-Webの記録
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

Facebook向けに最適なOGP設定の仕方をメモ。

この記事は約 1 分で読めます。 何かのサイトで「いいね!」をした時に、友達のニュースフィードに確実に出したいなら・・・OGPの設定が必要! ・・・と、いうワケで最近はサイトを作ったら「OGP設定」を …

no image

WordPressプラグイン「Simple Map」でスマホ対応GoogleMapを簡単設置。

この記事は約 1 分で読めます。 GoogleMapは、いろいろとお世話になっています。ただスマホで時々面倒だと思うのが、スクロールしていてGoogleMapに何気に指が触れてしまった時。 画面の横幅 …

no image

Google Analytics始めてみた。

この記事は約 2 分で読めます。前々からアクセス解析は少し興味あって・・・。 「FC2」とか、「NINJA TOOLS」のアクセス解析を利用していたのですが、前々から気になっていた「Google An …

no image

Google Mapの吹き出しを消してみた

この記事は約 1 分で読めます。 Google Mapをサイトに表示させる方法は、たくさんあると思います。 単純にGoogleMapを開いて、「ウェブサイトへの地図埋め込み用 HTMLコード」をそのま …

no image

WordPress the_excerpt()を使った抜粋にチャレンジ

今回は、「抜粋」をテンプレートタグthe_excerpt()を使って実現する方法にチャレンジしてみました。