スクリプトメモ » HTML/CSS
20060713
保存出来ない画像

保存出来ない、というと大仰ですが、単純にコンテクストメニューやドラッグ&ドロップでは保存出来ない画像の表示方法です。

<img src="spacer.gif" width="320" heigh="240" alt="写真" style="border:0px none;background-image:url(mypicture.jpg);">

通常はsrcに画像のファイル名を指定しますが、透明GIFを指定し、背景画像に実際に表示したい画像を指定します。
これにより、コンテクストメニューから保存出来る画像は透明GIFの方になり、実際に見える写真は保存出来ません。
また、前景に画像があるため、「背景画像を保存する」の項目が表示されません。

右クリック(MacではControl+クリック)でコンテクストメニューを表示し、「画像を表示」や「画像を保存」をしてみて下さい。

透明GIFを使わない写真写真
透明GIFで隠した写真写真
<div>や<p>の背景に指定することも出来ますが、
ブラウザによっては、コンテクストメニューから「背景画像を保存」という項目で保存出来たり、
画像の前後で改行される<div>の特徴の影響を受けます。

 

当然の事ながら、ソースを表示しすると画像ファイル名を確認することが出来ます


Wicker Wings