Web page help....

[krossfyter]

Okay Ive been asked to do web sites for 2 world renowned artists. My concern is of protecting thier images so that they cant be taken from the site and used for thier own profit etc. etc. Now I know these images would be low res in the first place since these are on the net and need to be compressed but I hear this still can be a problem. Is this true? I have heard that a solution to this problem would be to position the web page in quarters, so that if any one attempts to pirate the image, the computer notifies the owner of the web page. Is this true and how is this done... is it easy or hard and where do I go to get such script or whatever?

[Rower_CPU]

You can also disable right clicking...

..or use Flash...

[edesignuk]

Take a look here (http://www.anti-leech.com), it costs but is supposed to be very good, you could also use a no right click JavaScript, but these scripts don't work in all browsers, especially Mac ones, however they do work effectivly on PC browsers.

[Mr. Anderson]

The only problem with that is doing a screen capture - you can't keep people from doing that - the only way to prevent that sort of thing from happening is to put a water mark on the image - like the PhotoCD and other on line image services do.

D

[edesignuk]

This is the best no right click I have found:

<script language="JavaScript1.2">
if (window.Event)
document.captureEvents(Event.MOUSEUP);
function nocontextmenu()

{
event.cancelBubble = true
event.returnValue = false;
return false;
}

function norightclick(e)
{
if (window.Event)
{
if (e.which == 2 || e.which == 3)
return false;
}
else
if (event.button == 2 || event.button == 3)
{
event.cancelBubble = true

event.returnValue = false;

return false;
}
}

document.oncontextmenu = nocontextmenu;
document.onmousedown = norightclick;
</script>

[macktheknife]

One way I have seen other websites do it is have a viewable but small picture linked to the larger picture. You can see the small image file but without too much details. When you click on the link for the larger file, the larger file will have this "watermark" of sorts saying something like "X Company" written across the image.

[Choppaface]

you can do URL burn-ins on the image, but basically people will get around whatever you're trying to do some way or another. a good idea might be too encorporate the page's design elements into the pictures so they look funny elsewhere. otherwise, you'd prolly be better off using something like anti-leech or a proggie of your own so at least people won't be stealing your bandwidth (well, at least not without a lot of hassle)

[krossfyter]

hmmm... very good advice guys. im not surprised. thats why i come to you all for these sorts of things. i knew i could count on the macrumors gange... rock!

but yeah so im going to try a combonation of that no right click script and a watermark. is this possible? where does one put that script? for the watermark could i just do that in photoshop or do i need some special app to do that in?


thanks again guys. ;)

[krossfyter]

Originally posted by Choppaface
you can do URL burn-ins on the image,



whats this?

[macktheknife]

Originally posted by krossfyter
but yeah so im going to try a combonation of that no right click script and a watermark. is this possible? where does one put that script? for the watermark could i just do that in photoshop or do i need some special app to do that in?


Yup. Photoshop will work just fine. Just add an extra layer on top of the photo by putting a text box. You can just type "Property of X, Y, Z" and even change the color to a light gray so that while it is noticable, it's not offensively screaming in the viewer's face. BTW, even if you can get a script to not allow users to right-click on an image, a user can retrieve it from his or her browser's cache.

[edesignuk]

Originally posted by krossfyter
hmmm... very good advice guys. im not surprised. thats why i come to you all for these sorts of things. i knew i could count on the macrumors gange... rock!

but yeah so im going to try a combonation of that no right click script and a watermark. is this possible? where does one put that script? for the watermark could i just do that in photoshop or do i need some special app to do that in?


thanks again guys. ;)
Just watermark each image in PS before you insert it into your webpage, and pop the no right click JavaScript in the <head> tags of your webpages.

[edesignuk]

Originally posted by macktheknife

BTW, even if you can get a script to not allow users to right-click on an image, a user can retrieve it from his or her browser's cache.
Actually if you include this META tag the page should not be cached:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

[macktheknife]

Originally posted by verbose101

Actually if you include this META tag the page should not be cached:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">


Awesome! My bad . . .

[krossfyter]

Good.

Help me out here on something else ... if possible...
Im looking for a script to do this...
(Its very basic)

The viewer is able to click on some text or a button and it would bring up a seperate scrollable window over the page one has click the text on. I know I could do this with dreamweaver (its a behavior) but It only does it for IE 5+ and NN 6 browsers. I need something that works for most all NN and IE at least. Anything you all can point me to will be helpful... like a link to the scrip or just post the script...whatver.... as long as its free. Free dhtml man. Thanks.

[edesignuk]

Are you saying you just want a text or picture link to open a new window with what ever you choose in it?

[krossfyter]

Originally posted by verbose101
Are you saying you just want a text or picture link to open a new window with what ever you choose in it?

Basically yes. But I want the window to be smaller in size to the one that has the text you click on. Thats why I called it a pop up window. And yeah I want to put images and such in it.

[edesignuk]

You need to use the JavaScript function window.open(), it has many different things you can configure, such as what toolbars are opened with it, what size, it's title etc. Best advice is to do a search on google for it and there will be many places that can give a full explination.

[krossfyter]

okay but what browsers is that specific behavior capatible with?

[macktheknife]

Here's a simple way to create a pop-up window when a user clicks on an image. Insert the following lines somewhere in the HTML document:



<a href="#" onClick="window.open('page.html', 'insert name here',
'width=500,height=400,scrollbars=yes,resizable=yes,status=yes');">
<img src="image.gif"></a>




The "page.html" could be replaced by an image if you so wish. The width and the height are expressed in pixels and can be changed. You can have the pop-up window have no scrollbars or no resize option by changing "yes" to "no".

You can also do it by defining a function that will open the window. First, insert the following lines somewhere in the HTML document:


<script language="JavaScript">
function openWindow() {
window.open("page.html", "insert name here",
"width=500,height=400,scrollbars=yes,resizable=yes,status=yes");
}
</script>


Now you will need to call the function when a user clicks on your link. Try this:


<a href="JavaScript:openWindow('page.html');">
<img src="image.gif"></a>



I've previewed this post, and for some reason, "JavaScript" in the last chunk of code is displayed as "java script." Use "JavaScript" (no spaces). Hope this helps . . .

[Choppaface]

when I said URL burn-in, I meant what most people here have called a watermark. it was my impression that a watermark was something in the image file that screwed up the image whenever it wasn't viewed where it's supposed to or something like that....


Originally posted by verbose101

Actually if you include this META tag the page should not be cached:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">


the browser won't cache the page, but the user will still be able to save the image. moreover, the no right click script is useless against those who are smart enough to know how to turn off javascript, or save the page and go look for the images in the saved file's images folder :D

[macktheknife]

Originally posted by Choppaface
the browser won't cache the page, but the user will still be able to save the image. moreover, the no right click script is useless against those who are smart enough to know how to turn off javascript, or save the page and go look for the images in the saved file's images folder :D

Yeah, in the end, if a file is on the computer, it's on the computer. You can only use URL burns or "watermarks" to make your images less easy to copy.

[Rags]

A watermark is your best bet :) Just to give you a moment of pause, disabling right-click will often times annoy those that use it to bring up a menu to, say, bookmark the page, to go back, to go forward, etc. rather than using their keyboard or buttons on their browser.

[RBMaraman]

Originally posted by krossfyter
Okay Ive been asked to do web sites for 2 world renowned artists. My concern is of protecting thier images so that they cant be taken from the site and used for thier own profit etc. etc. Now I know these images would be low res in the first place since these are on the net and need to be compressed but I hear this still can be a problem. Is this true? I have heard that a solution to this problem would be to position the web page in quarters, so that if any one attempts to pirate the image, the computer notifies the owner of the web page. Is this true and how is this done... is it easy or hard and where do I go to get such script or whatever?

Maybe these 2 artists should have someone professional design their websites. If they are this concerned, I would suggest using a professional web designer that specializes in websites for artists.

[Gus]

Am I missing somthing here, or couldn't he just put it in his link tag?

<A HREF="yourimage.jpg" TARGET="blank">Click Here...</A>


or

<A HREF="yourpage.html" TARGET="blank">Click Here...</A>


Just curious as to if I am misunderstanding what he wants...

Gus

[Choppaface]

Originally posted by Gus
Am I missing somthing here, or couldn't he just put it in his link tag?

<A HREF="yourimage.jpg" TARGET="blank">Click Here...</A>


or

<A HREF="yourpage.html" TARGET="blank">Click Here...</A>


Just curious as to if I am misunderstanding what he wants...

Gus

that will still allow the user to do whatever they want with the image (in fact, it will be even easier for them to steal their pix, as they can just download the link :D :D)

BTW, don't forget the leading underscore, "_blank" :D :D

[krossfyter]

Originally posted by RBMaraman


Maybe these 2 artists should have someone professional design their websites. If they are this concerned, I would suggest using a professional web designer that specializes in websites for artists.


Actually they want me to do it... they dont want to spend a lot of money so im giving them a good deal. I pay off by learning and creating webistes for my portfolio etc. etc. ... and besides they are friends of mine. One whom I studied under. They are not that concerned with the image thing Im the one who suggested protecting thier images etc. etc.

[ibjoshua]

Originally posted by krossfyter They are not that concerned with the image thing Im the one who suggested protecting thier images etc. etc.

well in that case don't stress. as others have already said if an image is on a website then if someone wants it they'll get it.

i personally find the javascript solution irritating and offensive but i guess it is a deterrant.

there is another way but I think it only works in mozilla based browsers. simply stretch an empty div over the top of you images like so:

<div id="Layer1" style="position:absolute; left:0px; top:0px; width:640px; height:480px; z-index:0;">
<img src="img/home/blueboys.gif" width="640" height="480"></div>
<div id="Layer2" style="position:absolute; left:0px; top:0px; width:640px; height:480px; z-index:1;"></div> a right click will then not bring up a 'save image...' contextual menu. Of course it'll never stop someone scouring their cache or viewing the code to pick out the file name.

if you're actually wanting to enforce copyright then you will need to use a proper watermark embedding plugin with photoshop or purchase one of those proprietary java applets like they used to have on

terraserver (http://terraserver.homeadvisor.msn.com/image.aspx?T=1&S=10&X=2581&Y=17786&Z=12&W=2&ref=F%7cB-52+Aircraft%2c+Davis-Monthan+AFB%2c+Tucson%2c+Arizona)

another thing you can do is cut all the images up into multiple slices so that it's too much work to piece them all together .

i_b_joshua

[krossfyter]

hey thanks ib josua.

so the slicing up the imaging thing can be done on photoshop right?

about the watermark.... cant anyone somewhat esxpierenced with photoshop or any other painting software get an image with a watermark and simply edit it out?

[Gaz]

I remember when I first start doing some web design I wanted to protect all my work. However the true is the web is designed to allow people to share content and there is nothing you can do to protect your content besides only allow access to select people.

The problem with all these measures people are suggesting, particularly disabling right click, is that it you are breaking the usability of the browser and can make viewing your site a big turn off. I always open new browsers for links and when I loose that facility it is frustrating.

Your best approach would be to add a watermark if you are that bothered is it that big a concern if people want to borrow the images? As long as they don't break copyright I think it's good to let people take your images.

I hope this helps you and if I was you I'd try to make the most of maximising what the site looks like and not to get too overly concerned with this type of protection. Realisticly very few people will steal things, all they need is to see the pic to get an idea on how to reproduce the image.

Good luck

Gaz

[Rags]

Originally posted by krossfyter
hey thanks ib josua.

so the slicing up the imaging thing can be done on photoshop right?

about the watermark.... cant anyone somewhat esxpierenced with photoshop or any other painting software get an image with a watermark and simply edit it out?

Depends on the image, for example the text and circle below would be hard to edit out.

http://www.deadlyservers.com/tmp/watermark.jpg

[macktheknife]

Originally posted by krossfyter
hey thanks ib josua.

so the slicing up the imaging thing can be done on photoshop right?

about the watermark.... cant anyone somewhat esxpierenced with photoshop or any other painting software get an image with a watermark and simply edit it out?

It can't be done. As you can see from the sample picture above, it is almost impossible to remove the watermark. Yes, you can erase it, but the picture won't look the same because you're not erasing the layer but actual pixels. Essentially, once you save the photoshop file with a watermark in gif or jpeg format, it would be the same as someone taking a brush and painting over the Mona Lisa. Yes, you can try to get the paint off, but the Mona Lisa won't look the same.

[krossfyter]

Okay I understand what you all are saying... thanks.


Did i do it? Is this a success or not? Im just checking it out...playing around.

[Rags]

Almost! I had to look at both images for a minute or two and I can see 4 or 5 differences. Like I said before, it depends on the image. If it were a face or a portrait of someone, it would be very hard. Since my example is sort of sepia tone flames and basically shades of the same color, you can almost recreate the waves/spikes.

[macktheknife]

Originally posted by Rags
Almost! I had to look at both images for a minute or two and I can see 4 or 5 differences. Like I said before, it depends on the image. If it were a face or a portrait of someone, it would be very hard. Since my example is sort of sepia tone flames and basically shades of the same color, you can almost recreate the waves/spikes.

Yeah, it will depend on the image and how you place the watermark (I will say that a circle Rags' is pretty good since it covers a wide area). Rags' image had shades of similar color, so it was easy. However, I think this picture on the bottom will be much more difficult to change if you had a watermark embedded:

[Choppaface]

it would also help to have some gradient in the watermark. with a simple shape, you could try tracing the thing and then using levels, brightness/contrast, curves, etc, undo the watermark. increasing the entire pix's contrast would help eliminate any edges. but with a gradient of some sort in the watermark, it's quite a bit harder unless you try to go about reproducing it, which can be really hard if you use like a radial gradient or some complex gradient like clouds

[Gus]

Originally posted by Choppaface


that will still allow the user to do whatever they want with the image (in fact, it will be even easier for them to steal their pix, as they can just download the link :D :D)

BTW, don't forget the leading underscore, "_blank" :D :D

I wasn't actually referring to the users' ability to modify the image, just the new window with his picture or page. By the way, I know that the underscore is supposed to be necessary, but I have actually never used it, and it works fine in almost every browser that I have tried.

Gus

[Choppaface]

Originally posted by Gus

and it works fine in almost every browser that I have tried.


wow that's odd.... I would think that some of the more bratty types at W3C would be all over anybody who tried to put out a browser that would do that he he :D

[ibjoshua]

Originally posted by Choppaface


wow that's odd.... I would think that some of the more bratty types at W3C would be all over anybody who tried to put out a browser that would do that he he :D

this would also work:

<a href='apage.html' target='this_does_not_matter'>would work</a>


if the 'target' attribute of an anchor tag contains a name that does not match any existing window then a new window is opened. it's not the same as using javascript though as you don't have any control over the windows appearance.

i_b_joshua

[ibjoshua]

Originally posted by Choppaface
it would also help to have some gradient in the watermark. with a simple shape, you could try tracing the thing and then using levels, brightness/contrast, curves, etc, undo the watermark. increasing the entire pix's contrast would help eliminate any edges. but with a gradient of some sort in the watermark, it's quite a bit harder unless you try to go about reproducing it, which can be really hard if you use like a radial gradient or some complex gradient like clouds


i'd agree with most of what everyone has said but i think it should be pointed out that technically if it's visual it can be corrected. a proper digital watermark is embedded in the code and is undetectable by the human eye. any visual watermarking is in fact there simply to deter unauthorised use.

i_b_joshua