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.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

苦手なJavaScriptをイチから勉強してみる【基本準備編】

この記事は約 1 分で読めます。今更なんですが、実はJavaScriptはちょっと苦手です。。。 jQueryのライブラリーを使って、部分的にいじる事はあっても・・・何となく「JavaScript」っ …

no image

Twitterのフォロミーバッチにチャレンジ♪

いろんなサイトの横側に見掛ける「Twitterのフォロミーバッチ」。
どんな風に作られているか気になっていたので、私もチャレンジしてみました。

no image

スマホ用サイトに「LINEで送る」ボタンを設置してみる

この記事は約 1 分で読めます。 スマホ向けに情報を発信しているサイトなど、あると便利なシェアボタン。 いつの間にかに「LINEで送る」ボタンが出来ていたのですね。 ひとまず自分用に記述方法を2種類メ …

no image

WordPress 簡単にスライダーを投稿内に追加出来るプラグイン「SlideDeck」

この記事は約 1 分で読めます。 WordPressには、とても素敵なスライダープラグインがあります。まだ試せていないものもたくさんあるので、少しずつ試していく予定です。 今回は、投稿する記事の中にス …

カラーミーショップ無料テンプレート「Bit」のフリーページ表示順を変えてみた

この記事は約 1 分で読めます。 比較的安価でネットショップ初心者でも始められる「カラーミーショップ」。 スマホからのアクセスにも対応できる、シンプルなレスポンシブデザインの無料テンプレート「Bit」 …