1306
Discussion & Troubleshooting / Yeah but you can disable drag-and-drop too!
« on: September 01, 2002, 02:10:28 AM »
Okay. We have a javascript that disables right clicking so we can prevent the user from saving our images.
Okay. Javascript can be disabled by the user in their browser and we could go one step further and check for it before allowing them into the galleries.
But using IE, the user can still drag-and-drop the image from the browser onto their desktop. Or can they???
You won't be able to do this from my website. Saving the page using File>Save As... will produce an error. Drag-and-drop the image and you'll get a spacer gif instead. So how did I do it?
It's a simple technique and I've only tested it with jpeg files since that's all I'll be using on my site. The concept is simple. Make the table background the image itself and place a single pixel transparent gif in the table cell.
Here's what I have in my media/jpg.html template:
Obviously this technique requires {image_height} and {image_width}. That means the images must be stored locally on the server or your database must have the information.
For a complete solution, you should also ensure the user's browser has javascript enabled to prevent them from right clicking and selecting "Save background as..."
Okay. Javascript can be disabled by the user in their browser and we could go one step further and check for it before allowing them into the galleries.
But using IE, the user can still drag-and-drop the image from the browser onto their desktop. Or can they???
You won't be able to do this from my website. Saving the page using File>Save As... will produce an error. Drag-and-drop the image and you'll get a spacer gif instead. So how did I do it?
It's a simple technique and I've only tested it with jpeg files since that's all I'll be using on my site. The concept is simple. Make the table background the image itself and place a single pixel transparent gif in the table cell.
Here's what I have in my media/jpg.html template:
Code: [Select]
<table width="{image_width}" height="{image_height}" border="0" cellspacing="0" cellpadding="0" background="{media_src}">
<tr>
<td><img src="{template_url}/images/spacer.gif" width="{image_width}" height="{image_height}" alt="" />
</td>
</tr>
</table>
Obviously this technique requires {image_height} and {image_width}. That means the images must be stored locally on the server or your database must have the information.
For a complete solution, you should also ensure the user's browser has javascript enabled to prevent them from right clicking and selecting "Save background as..."