How to prevent image and code copying from Javascript slideshow images

[HTMLignorant]

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.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:

1. 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
2. How to alter code so ‘view source’ is not visible? Is this possible?
3. How to make it as hard as possible to copy code and images ?

[ajfmrf]

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]

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]

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]

I don't mean to be blunt, but did you read this?

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]

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]

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]

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,

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.

Edit:

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]

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]

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.