Disable right click on image in email client - javascript

Is there a way to disable right clicking on an image in gmail? I'm aware of methods to do so using javascript, but only for an entire page. Is it possible to embed jscript into the body of an email and have it parsed?

You can scrape the image out no matter what you do, so if you want to "disable" right clicking you could just put the image under a transparent div.

There is no way to do this in html email. CSS position and negative margins are not widely supported, so you can't hide it under another transparent element.
Even if you embed the image using base64, it still right-clicks to download it.

Related

How to watermark only original images?

I am trying to protect my website content by putting scripts to deny the right click and to see the source code in the browsers. But this is not sufficient. I want to know how to watermark only the original file and not the image that is seen on the webpage.
For example, an image that users can see on the web without watermark and when they click right and select "Open image in a new tab" they go to "website.com/image.png" and they see the watermarked image.
Is this possible?
P.S.: Sorry for my bad English, I'm not a good writer.
Thanks
Serving users a image which is not watermarked is not a good idea because they can download it easily so the best way will be watermark every images and render it users by slicing it. Slice the image and show only the image and hide the water mark and whey they will open it in new window full image will be loaded with the water mark
For creating Watermark on the fly with php
http://www.developphp.com/view.php?tid=1147
And for slicing image i don't know how to do that but i know it is possible but there are many ways to do it like you can zoom it to hide watermarks.
First of all, this will not stop them from downloading the image without watermark, because they can disable javascript, or simply right click on the image and save it right there, or the worst: simply do a print screen and save it to paint then crop it. Probably the best option is to have watermark on all of your images, on the website and on the direct access.

How do I prevent an iframe from capturing the background color of the page?

I maybe wrong in my approach here but I created an HTML5/Javascript container that uses javascript to glow the text and to use a countdown. I was however able to achieve the iframe result i was seeking after great difficulty but the only thing is that the background color of the page on which i have the widget if you will is in red color so now wherever the iframe is being embedded it moves around the widget and shows the background color.
I thought of changing the color to white but that still has problems with the positioning so I am wondering if there are something that i need to fix on the page OR how do i make sure only the part i want from the page is embedded?
Without more information this is a long shot but try to put a background-color:transparent; on the offending widget or simply do not use a background color on it so that is does not overflow your desired space.

Crop (Get as Image) Visible Webpage Content by Javascript

Suppose, I have a web page and it's showing in the web browser. Is it possible in Javascript to do the following:
The whole visible webpage (without scrolling, just whatever is visible at a point), I draw an area on that using my mouse (either by drawing or by just selecting a two points as a rectangle).
I click a submit button, and that visible area is converted as an image and saved to the server / client computer or whatever way, but I get the image.
I just want to know whether this is technically feasible, if yes, how ?
Yes, maybe you could try using jsFeedback? I know Google does this as well.
Also, http://html2canvas.hertzen.com/
For security reasons, No. If you're on an intranet or want to use it only privatly you may research into making a custom browser plugin that can do this for you.

How to print webpage with background image? [duplicate]

This question already has answers here:
How can I print background images in FF or IE?
(8 answers)
Closed 9 years ago.
I'm trying to print a web page form in IE with a background-image; now the issue is that it is not showing background-image in its print. Is there a way to fix it because I tried lots of tricks but none of them are actually working. if any one of you fixed it before please share.
This is just for people who may try to spend a lot of time to print css background images.
This may not be 100% working, but you may pick from here.
Solution: not possible (if overlapping images are present in UI)
$('#rootdiv').find('div').each(function(){
if( $(this).css("background-image") != "none"){
$(this).css("overflow" ,"hidden").css("position", "relative");
$(this).prepend('<img style="display: block;position: absolute;" src="'+$(this).css("background-image").replace(/"/g,"").replace(/url\(|\)$/ig, "")+'">');
$(this).css("background",'..');
}
});
P.S.: To have sliced half image print on the page, we need to set a width for the div ( i.e., $(this) ) less than actual width of background-image( specified by src in dynamically created img tag above) , it will show sliced image
Here are two really good posts, previously asked in stackoverflow:
Print webpage with background images and colors?
https://stackoverflow.com/questions/596876/how-can-i-print-background-images-in-ff-or-ie
They both reference list style usage.
Go to Tools > Internet Options, click on the "Advanced" Tab. Scroll down to a header called "Printing", check "Print background colors and images".
This instruction is for IE 8.0, but should be somewhat the same for older versions.
This is default to unchecked because not everyone wants to print the fancy stuff but only the text.. But nowadays, its quite a norm to want everything in the printing!
If it's only for the background image, you could try and right click the background, and select something like 'show background-image.'
But, if you want the web page as a whole, you could always try to 'print the screen' and open the newly made bitmap in paint and print that.
By default IE will not print background images and colours - it's a browser setting to save ink/improve legibility of print-outs.
Apart from telling your users to change this setting, the only thing you can do about this is to use real image elements instead of background-images and position your text in front with CSS.
Why do you need the background-image to print out? If it is because the background image is dark and the text in front is light (and therefore unreadable when printed), then what you can do is have a print-only stylesheet that sets darker text.
First hit in google:
http://www.steve.maurer.net/tutorials/software_tutorials/background_print_id.htm
Just checked and the option is still in IE8.
The default is to not print background colors and images, probably to save ink.
Check this article:
http://webdesign.about.com/cs/css/a/aa042103a.htm
I use it to make custom print page ,different from the one from screen.

Image previewer for webpages

I am creating a webpage in html with php.
I want the user to be able to click on a small icon image. When the icon is clicked a preview of a larger image appears.
Guessing the solution probably involves javascript or flash. Can you point me to the right direction. Thanks in advance.
It sounds like you want a Lightbox?
A Lightbox allows you to have thumbnails of images on your page and when a user clicks on them, the larger image will popup in the middle of the screen. It's very common.
If what you are really looking for is a show/hide effect, you could use JavaScript to show the larger image if the user clicks on the smaller image. A JavaScript library like jQuery or YUI will make it very easy.
If you're doing it in php, then may as well use GD to do it for you.
Here's an excellent article to get you started: http://icant.co.uk/articles/phpthumbnails/

Categories

Resources