WEBのお勉強とその他趣味的な感じで

<img src="/img/matai-san.gif" alt="mataiイメージ画" oncontextmenu="return false"/>

みそは「oncontextmenu=”return false”」です。
これは、いわゆる右クリックで出てくるメニューを非表示にします。
そうすることによって、「画像のコピー」を防止します。
よく、bodyタグにつけて、サイト全体を右クリック防止したり、javascriptを使って、
右クリックしたら、ポップアップがでて、「右クリック禁止です。」と表示したりするサイトを見かけます。

ソース

<img src="/img/matai-san.gif" alt="mataiイメージ画" oncontextmenu="alert('右クリック禁止！');return false;" />

こんなのです。設定によっては、ポップアップブロックに引っかかるかもしれません。

個人的にこの手法は好きではないです。
特に、こういうポップアップは、見に来ている人の気分を損ねます。
そもそも、右クリック＝画像の不正使用という考えが好きではないです。
ちなみにこれは、簡単に破れます。ブラウザによっては、効果ないものもあります。

ソース
まず、スタイルシートに以下を記述します。

span.cover{
  position:absolute;
  display:block;
  width:100%;
  height:100%;
  background-image:url(/img/a.gif);
}

ソース

<p style="position:relative; width:100px; height:100px;"><span class="cover"></span><img src="/img/matai-san.gif" alt="mataiイメージ画" width="100" hight="100" /></p>

スタイルシートの追記ができない場合は

<style type="text/css">
span.cover{position:absolute;display:block; width:100%; height:100%; background-image:url(/img/a.gif);}
</style>

記事の途中に上のソースを入れれば、大丈夫？かもしれません。

試しに右クリックしてみてください。
「画像を保存する」
というようなメニューは出ないと思います。（人によっては出るかも？）

この方法は、「span class=”cover”」で画像をカバーしているようなイメージです。
ただし、ソースを見ると画像のURLが分かってしまいます。

ソース
まず、スタイルシートに以下を記述します。

img#matai{
  background:url(/img/matai-san100.gif) no-repeat;
  width:100px;
  height:100px;
}

ソース

<img id="matai" src="/img/a.gif" alt="mataiイメージ画" width="100" hight="100" />

スタイルシートの追記ができない場合は

<style type="text/css">
img#matai{background:url(/img/matai-san100.gif) no-repeat; width:100px; height:100px;}
</style>

記事の途中に上のソースを入れれば、大丈夫？かもしれません。

右クリック等で画像を保存してみましょう。
あれ？不思議？何もないはずです。

カラクリは、
実際はa.gifというとても小さな透明画像を表示しています。
その画像にスタイルシートを使って、背景画像に「mataiイメージ画」を指定しています。
見えている画像は背景画で、右クリックで保存しようとしているのは
指定した小さな透明画像「a.gif」です。
外部スタイルシート（css）ファイルで指定すれば、ちょっとソースを見ただけでは
画像のパスもわからないです。