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.
Related
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.
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.
I would like to display an infographic on my page via a pop out like the facebook photo viewer, rather than just have a popup window be created with the image in it. I just like the UI of a pop out versus a pop up (no window management).
Is there a jQuery/javascript library that accomplishes the pop out functionality?
I'm trying to emulare visual.ly that loads the infographic in a pop out once you click the preview image.
Thanks
There are a lot of them. Search Google for "jQuery Lightbox" and at least one of them should match your needs.
For jQuery, try fancybox, a lightbox alternative.
There is also this page which compares different alternatives.
Yoxvew is a pretty good one. The downside to it is as far as I know it does not allow for scrolling, so you can't use larger images. There are a ton of these plugins around though. If none of them fit your needs it isn't too hard to make your own, or you can modify an existing library.
The page you link to use Colorbox.js to view photos.
This can be done simply with two <div> tags as well. One, which blankets the whole page with some semi transparent color or image and has a z-index larger than the whole page. Two, which has a z-index larger than one, is spaced relevantly, and contains whatever you want to show. Rolling your own isn't always desirable, as there are plenty of pre-written alternatives pointed out such as fancybox, lightbox, etc., but sometimes it is nice to know your options.
I would like to do the following trick in a browser:
Create three image files of different size (small, medium, large) from one picture.
First, display the small image in a
browser.
When a user zooms in the small image
replace it with the medium one.
Now the user can scroll it within the
window up and down, left and right.
When a user zooms out the small image
replace it with the small one, etc.
I would prefer JavaScript (Flash is the second option). What tool would you recommend ?
A quick google search turns up:
http://www.intenseblog.com/design/8-amazing-javascript-image-zoom-scripts.html
and:
http://www.hotscripts.com/blog/javascript-zoom-scripts/
Several of these libraries appear to do what you want.
Would this work for you?
http://www.netzgesta.de/shiftzoom/
This might be for image data that is much larger than you are interested in.
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/