PDA

View Full Version : How to prevent image and code copying from Javascript slideshow images



HTMLignorant
10-22-2012, 09:34 AM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Sorry. I posted this in another thread before reading the sticky thread there. Apologies.


Iím not an html expert and use Frontpage2003 to design, though Iíll be uploading to a Linux server. Iím aware that even with right click disabled people can still copy images. Before I highlight my problem I want to clarify, that I donít care about google rankings or SEO for this website, so it doesnít matter if the code is Ďinternet unfriendlyí. I wouldnít mind this particular website not being in the search engine index at all. Reason being, I only want trafic from a private advert. I donít want casual surfers clicking and phoning, so the code can be as unfriendly as possible to search engines, no worries there. That said, I donít want to annoy the people whom I do want to view the site, and most people are annoyed when right click is disabled.


Basically, I want to show slideshows of images on a website. Simple fade in, fade out images very briefly, and the website viewers shouldnít be able to stop or copy the images. I donít want want descriptions or tags or any buttons to show, or anyhing. Just a simple image show, which automatically starts when the page is loaded, and doesnít stop.

I have already set the code so that on mouseover, it doesnít pause. However, With the current setup, if you right click on the slideshow, you can still stop the image and copy it.


I have tried some code I found on the internet for disabling right click, but I donít want to disable all right click.


Iíd use flash and swf. files But I canít find a free flash creator which doesnít have a watermark or company tagline at the end in the free version? So I decided to use this code.

Please could someone show me:

How to alter this code so nobody can right click on the image and save it? Please highlight which part of the code and where I should add/change
How to alter code so Ďview sourceí is not visible? Is this possible?
How to make it as hard as possible to copy code and images ?

ajfmrf
10-22-2012, 04:56 PM
Would you consider making the site accessible only by logging in with a username and password.This way only those you supply the info to can visit it.

HTMLignorant
10-22-2012, 05:20 PM
Bud

thanks for your reply. No, I don't want to do that.

I don't mind inconveniencing search engines but i don't want to inconvenience people as I get really annoyed when i go to gimmicky sites that make you sign in.

I just want a normal site, with a slideshow which can't be copied, or at least not easily copied. Same with code. I know that is impossible, but i want to make it as hard as possible.

It should be easy for viewers but i don't care about search engines and rankings.

HTMLignorant
10-22-2012, 05:28 PM
An't anything be added to the layer that holds the pictures in the javascript code? What about that transparent gif thing? I wish the writer of this code had automatically done that.

traq
10-22-2012, 05:47 PM
I don't mean to be blunt, but did you read this (http://www.dynamicdrive.com/forums/showthread.php?48916-Why-you-cannot-protect-your-source-code-and-files)?

Yes, you can make it harder. However, this is pointless: it's only "harder" for people who don't know how to defeat your precautions, and these are generally not the people who want to. To anyone who really wants your content, there is nothing to be done that is "too hard" to circumvent. You'll only make it more difficult for your legitimate users: your site will become unusable to them long before you lock out those who want to steal your content.

(As for ajfmrf's suggestion, I don't think making someone sign in to view content is "gimmicky." If it's privileged content, it's fine to require the user to authenticate beforehand. You can persist their login (e.g., with a "remember me" cookie) if you don't want to make them do it on every visit.)

Turning off javascript is trivial, and most times, that will completely defeat your protections. With the availability of web inspectors in modern browsers, even amateur users have a decent chance at getting your content without resorting to turning off javascript. Read through the thread I linked to for more details/discussion on this topic.

HTMLignorant
10-22-2012, 07:02 PM
Thanks I know, i've read all that and similar. In fact in my first post above I said I can't deter professional theives. . To be blunt too, i didn't come here for discouragement. I'm not trying to deter professional html thiefs. I know they can take the code and images.

I know the type who want to steal my site, and it's not a professional html person.

Can the code above be modified to stop right click of images in the slideshow or not?

A simple yes or no would suffice.

Thanks in advance.

djr33
10-22-2012, 07:31 PM
It's really a hard question to answer. The answer is no, because it's always possible to get around it. There may be ways to suggest to the browser to stop right clicking, but it's getting harder and harder to do that-- that's not something that browsers intend for users to be able to do. So I really don't know what to say about it. "Discouragement" aside, we honestly think what you're doing is something of a contradiction. But you can do it if you want.

My suggestion, if forced to give one that would do something like this, would be to place a transparent div (or perhaps image) on top of the slideshow, unrelated to the slideshow. Then there is no way to directly access the slideshow with the mouse, and you don't need to change the slideshow code at all. Again, this will not prevent anyone from stealing it if they're motivated enough. It's much easier to break the "security" than to design it, and there's just no good solution.

traq
10-22-2012, 07:55 PM
right click: no.

transparent gif: it would take some work, since the slideshow is dynamic, and will appear in front of a transparent gif in the markup.

however, it won't be effective. it doesn't take a black-hat to find those images - since your "person of interest" apparently knows how to view source (and right-click is not the only way to do this anyway), they can see your list of slideshow images. copy, paste, and they're viewing the image directly.

even more simply (http://www.dynamicdrive.com/forums/showthread.php?48916-Why-you-cannot-protect-your-source-code-and-files&p=207054#post207054),
you can always take a screen capture.

--------------------------------
I'm not trying to discourage you. I'm trying to clarify why what you are asking to do is unfeasible. Ignoring the philosophical ("the internet is for free exchange of information") or ethical ("my photo belongs to me") issues, there are basic, practical truths about how the internet works:

1. if you don't give them the content, they can't see it.
2. if you give them the content, they have the content.

you can't change that.



on a slightly related note, you can make a small, HTTP-request-less transparent gif like so:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP" width=whatever height=whatever>fun.

HTMLignorant
10-22-2012, 09:13 PM
Traq and DjR33, I appreciate your responses. I apologise if i came across as cranky, Traq.

I'm totally html ignorant.

Sounds good. Could you or anyone else tell me what code I need to add to do what you suggested here? Do I need to add it in the layer?


I currently have the slideshow set in this layer


<div style="position: absolute; right: 500px; top: 17px; width: 402px; height: 700px; z-index: 9" id="layer8">
&nbsp;<div id="fadeshow1"></div></div>

And I have a
transparentimage.gif somewhere in the same file which i can use. I saved a transparent gif but don't know how to use it, or code it to cover the layer. So could you tell me what to add where?

Thanks in advance

keyboard
10-22-2012, 09:56 PM
I'd like to suggest a different approach.
Transparent div doesn't stop anyone from just screenshot-ing it (which is something a decent amount of people can do, very easily).

I'd suggest instead, that you watermark your images.
It doesn't matter then if they download them, because they can't do anything with them (unless they strip the watermark (which is very annoying to do (trust me on that))).

If you can't, or you're not willing to, do as traq or daniel suggested (transparent div).

If the slideshow is in this div -



<div style="position: absolute; right: 500px; top: 17px; width: 402px; height: 700px; z-index: 9" id="layer8">
&nbsp;<div id="fadeshow1"></div></div>


than try adding a new div that looks like this -



<div style="position: absolute; right: 500px; top: 17px; width: 402px; height: 700px; z-index: 9999" style=" background-color:transparent;"></div>


It may not work.

If your willing to get a bit more advanced, you could look into a flash or java image slideshow.
That'd make it very tricky for non power-users (people who know their way around a computer)


But I'd like to stress one thing: it doesn't matter how well a user knows to steal content. They can just go online and google it.

traq
10-22-2012, 10:42 PM
Traq and DjR33, I appreciate your responses. I apologise if i came across as cranky, Traq.
Not at all - I didn't think you were. The question you're asking comes up a lot among web guys, and it's a very difficult concern to shake.

When it comes up (and it comes up all the time), we try to address the fact that it "can't be done" directly, because trying to do it is a downhill battle. Worse, because there really isn't a battle at all.


I'm totally html ignorant.
Which is not a problem, either. As long as you're learning.

One suggestion on that front is to consider reducing your dependency on WYSIWYG web editors (like FrontPage). You've been talking about "layers" and so forth, and it took me a while to realize what you're actually talking about. You're learning by using FrontPage.

The problem there is that, if you want to do "web" things -like modifying scripts, or designing your own html/css layout elements- then you need to learn "HTML+CSS," not "FrontPage." Programs like that have their own way of doing things, which are a) almost always not the "better way" to do things, and b) many times are actually counterproductive. Plain text editors, or code editors, are better tools for web design. At a minimum, it can do nothing but good to spend more time in the "code view" and less time in the "live view" (or whatever it's called).


Could you or anyone else tell me what code I need to add to do what you suggested here? Do I need to add it in the layer?
I currently have the slideshow set in this layer

<div style="position: absolute; right: 500px; top: 17px; width: 402px; height: 700px; z-index: 9" id="layer8">
*<div id="fadeshow1"></div></div>
And I have a transparentimage.gif somewhere in the same file which i can use. I saved a transparent gif but don't know how to use it, or code it to cover the layer. So could you tell me what to add where?

Here's the basic "transparent gif" idea [demo (http://jsfiddle.net/UTaF4/1/)]:
<style>
#container{ position: relative; }
#slideshow{ margin: 0; padding: 0; }
#slideshowcover{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
</style>
<div id=container>
<div id=slideshow>
<img src="http://img4.imageshack.us/img4/3503/ferrari250gtlusso000.jpg" alt="example image" width=350 height=218>
</div>
<img id=slideshowcover src="transparent.gif" alt="transparent gif">
</div>

HTMLignorant
10-22-2012, 11:37 PM
Keyboard, I note you changed the z:index to 9999, or was that a typo?

If I add this code ...........to the html page? or the original Javascript file? I can't find a flash movie maker which does't have a watermark or signature, a free one that is.

keyboard
10-22-2012, 11:49 PM
Nope, that was on purpose so that it would be above anything else...
You add it to the html page (add it right before or after the div with the slideshow in it), but depending on the slide show, it may not work.

There was a free flash game maker that I used to use without any watermarking... it should work with this too. I'll try to go find it.

HTMLignorant
10-23-2012, 12:26 AM
keyboard, that didn't work, neither did Traq's code above,

Thnak you both anyway.


I'd have thought it would have been pretty easy to put a transparent gif in the original javascript file, instead of on the html page, that way, all the pages where the script is used would have the new code. Can't the original code in javascript file be fiddled with?

thanks anyway.

HTMLignorant
10-23-2012, 10:14 PM
how do i use this code, that someone here gave me? Do i just add it to the div tag? I don't get all this div talk



<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP" width=whatever height=whatever>
Do i need to save a gif anywhere first? Do i have to fill in the width and height with the size of the layer i'm trying to cover?

I don't understand how you can make a one pixel transparent gif fit the whole div thing

traq
10-24-2012, 01:03 AM
You can see how it's used here (http://jsfiddle.net/UTaF4/1/). (I though I posted that link at the time, but I guess not.)

Using this method, no, you don't need to save the actual image (it's encoded in the data:uri).

If this is confusing to you, don't worry too much. It seems odd, but the image is actually there inside the <img> tag. It's decoded by the browser automatically.
You can also do the "normal" thing and save the gif on your website, then use src="mytransparent.gif" as you would any other image.


To make sure it covers everything you're trying to, simply set the width and height to the desired dimensions. The image will "stretch" to fit.


A problem you'll likely run into with the actual slideshow is that, being generated dynamically by javascript, the transparent gif will probably end up *underneath* the slideshow and won't accomplish anything (that's what happened when I was messing around with it yesterday).

HTMLignorant
10-24-2012, 06:38 AM
Traq, thank you. I will try that a little later on.

I just wanted to let you all know that I found a curious solution that works.

I was using Frontpage as you know, i know it's not the best, but i rarely use it anyway, and just wanted to get something up there on the web, and this works OK for me.

What I did was, that I drew another layer on top of all of of them (FP has layers, which you can add images or text in), in the 'code view' they're called 'div layer' and can be stacked on top of one another, ie. one can hide the other unless you make it 'transparent'

Anyhow what I did was I drew another layer (layer 10) on top of the slideshow and covered the text with it too. It takes up much of the page. I then positioned layer 10 to be on top of the ones it covered, and added the transparent gif as a background image.

This seems to work. It doesn't stop right click, but if anyone tries to save the images in the slideshow they only get the transparent gif. They cannot copy the text either.

However it's not a foolpproof solution, you can still drag over the whole page and save it to another Frontpage page and the images are pasted.

I was wondering, is there a number code for the transparent colour?

bernie1227
10-24-2012, 07:36 AM
I was wondering, is there a number code for the transparent colour?

It's not possible to display transparency via a hexidecimal color code, it is a separate property in itself, opacity in modern browsers and filter:alpha(opacity=........ For earlier versions of Internet explorer.
http://css.flepstudio.org/en/css3/opacity-transparency.html

traq
10-24-2012, 02:27 PM
for browsers that support css3 (most modern browsers (http://caniuse.com/css3-colors)), you can use rgba (like rgb, except with "alpha" (transparency)):
.transparentBackground{ background: rgba( 0,0,0,0 ); }

HTMLignorant
10-25-2012, 11:25 AM
Thanks Traq, and Bernie,

I have one other questions, but this may be a Front page issue,

Instead of expanding the transparent.gif (assuming one uses that instead of the rgba code) to fit the div layer, it worked, and i presume it's because i used it as a background, and FP put it on 'repeat' ie. repeat background. Would that have the same effect if i had used it as a normal image and expanded it? Whats the difference between using it as a background for the div layer and repeating it, and using it as a normal image and expanding it to fit the div layer?
Thanks