olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascriptサンプル、画像表示系の設置方法

  1. Home>
  2. 画像表示>
  3. 画像エフェクト(加工)>
  4. 右クリックで画像を保存できなくする

画像エフェクト(加工)mootools.js

右クリックで画像を保存できなくする

  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mootools 3D Carousel</title>


<style>

	body{background:#000}
	
</style>

<script src="mootools.js" type="text/javascript"></script>
<script src="dwProtect.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
	var protector = new dwProtector({
		image: 'blank.gif',
		elements: $$('.protect')
	});
});

</script>

</head>

<body>


<img src="2.jpg" width="530" height="300" class="protect" />


</body>
</html>

右クリックで画像を保存することをを禁止するスクリプト dwProtect.js。
正確には目当ての画像でなく、ダミー画像をダウンロードするようにします。
一歩間違えればいたずらに使われそうですが、そこは利用者の良識にゆだねるしかありません。
mootool1.2.js を使用します。

１．ダウンロード/セッティング

サイトへ行き dwProtect.js をダウンロードして下さい。
次に こちらからmootools.js をダウンロード。（この解説ではmootools.jsとりネームしてます。）
ついでにブランク用の画像もゲットしておいてください。

２．<head>設定

アップしたスクリプトを読み込ませます。

<script src="mootools.js" type="text/javascript"></script>
<script src="dwProtect.js" type="text/javascript"></script>

次にスクリプトの設定を書き込みます。

<script type="text/javascript">
window.addEvent('domready', function() {
    var protector = new dwProtector({
        image: 'blank.gif', // ブランク画像までのパス

        elements: $$('.protect')  // 保存を禁止する画像につけるクラス名

    });
});
</script>

これで設定は完了です。

３．HTMLマークアップ

画像にさっき指定したクラス名をつけるだけでOKです。

<img src="2.jpg" width="530" height="300" class="protect" />

関連スクリプト

感想

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。