CodingForums.com - Problem with Image/Disable Click Script

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Problem with Image/Disable Click Script (http://www.codingforums.com/showthread.php?t=681)

Problem with Image/Disable Click Script

I do not personally know Javascript. I have created a script that will disable all right clicks anywhere on the page, and all clicks on images. I want to keep this functionality, with one exception, I want users to be able to left click on images that are links.

Do I need to add something to the IMG tag to bypass the script for those images, or do I need to modify the script?

Here is the current script I am using (like I said, I dont know Javascript, let me know if you see an easier way, or a way to improve it...)

Code:

<script language=JavaScript>

<!--



var clickmessage="These images are ©2002 by Bearfoot Technologies.\nAll Rights Reserved.\n\nYou may not copy, distribute, or otherwise use these\nimages without express written permission\nfrom Bearfoot Technologies.";



function clickNS(e)

{

  if (document.all)

  {

    if(event.srcElement.tagName=="IMG")

    {

      alert(clickmessage);

      return false;

    }

    else if (event.button==2||event.button==3)

    {

      return false;

    }

  }

  else if (document.layers)

  {

    if (e.which==2||e.which==3)

    {

      return false;

    }

  }

  else if (document.getElementById)

  {

    if (e.target.tagName=="IMG")

    {

      alert(clickmessage);

      return false;

    }

    else if (e.which==2||e.which==3)

    {

      return false;

    }

  }

}



function disableclick(e)

{

  if(document.layers)

  {

    alert(clickmessage);

  }

}



function associateimages()

{

  for(i=0;i<document.images.length;i++)

    document.images[i].onmousedown=disableclick;

}



if (document.all)

{

  document.onmousedown=clickNS;

}

else if (document.getElementById)

{

  document.onmouseup=clickNS;

}

else if (document.layers) 

{

  document.captureEvents(Event.MOUSEDOWN);

  document.onmousedown=clickNS;

  associateimages();

}



document.oncontextmenu=new Function("return false")



</script>

A right click disabler is obsolete and useless. :( You can always see the source by clicking View => View Source in I.E. and have the links to the images to save them.

Not really that obsolete or useless, when combined with other security precautions I am taking on my site.
Here is what the first 15 lines of my site (in real HTML) appears like under view source:

Code:

<script>

<!--

document.write(unescape("%3C%21DOCTYPE%20html%20PUBLIC%20%22-//W3C//DTD%20HTML%204.01%20Transitional//EN%22%3E%3CHTML%20LANG%3D%22EN%22%3E%0D%0A%3CHEAD%3E%3Cmeta%20http-equiv%3D%22Content-Type%22%20content%3D%22text/html%3B%20charset%3DISO-8859-1%22%3E%0D%0A%3CMETA%20HTTP-EQUIV%3D%22imagetoolbar%22%20CONTENT%3D%22no%22%3E%0D%0A%3CLINK%20REL%3D%22SHORTCUT%20ICON%22%20HREF%3D%22/favicon.ico%22%3E%0D%0A%3Clink%20REL%3D%22Stylesheet%22%20href%3D%22/stylesheet.css%22%20type%3D%22text/css%22%3E%0D%0A%3Cmeta%20name%3D%22description%22%20content%3D%22Homepage%20for%20Bearfoot%20Technologies%2C%20a%20software%20programming%20company%2C%20currently%20working%20on%20a%20RPG/RTS%20game.%22%3E%0D%0A%3Cmeta%20name%3D%22keywords%22%20content%3D%22software%2C%20bearfoot%20technolgies%2C%20rpg%2C%20game%2C%20company%2C%20dellenmoor%2C%20software%20developement%2C%20graphics%2C%20texture%20artists%2C%203d%20modelers%2C%20computer%20programmers%22%3E%0D%0A%3Cmeta%20name%3D%22author%22%20content%3D%22Jaw959@new.rr.com%20-Web%20Design-%22%3E%0D%0A%3Cmeta%20name%3D%22Generator%22%20content%3D%22Microsoft%20Wordpad%22%3E%0D%0A%3Cmeta%20name%3D%22Robots%22%20content%3D%22%3D%22INDEX%2CFOLLOW%2CNOARCHIVE%22%3E%0D%0A%3CMETA%20NAME%3D%22MS.LOCALE%22%20CONTENT%3D%22EN-US%22%3E%0D%0A%3CMETA%20NAME%3D%22CATEGORY%22%20CONTENT%3D%22Software%20Development%22%3E%0D%0A%3CTITLE%3EBearfoot%20Technologies%20Software%20Developement%3C/TITLE%3E%0D%0A%3C/HEAD%3E%3CBODY%3E%0D%0A%3Ctable%20align%3D%22center%22%20width%3D%22100%25%22%20cellspacing%3D%220%22%20cellpadding%3D%228%22%20border%3D%220%22%3E%0D%0A"));

//-->

</script>

All my images are served through a special script which checks to make sure the referring page is part of my site.
The image toolbars are disabled, and any attempts to load my images directly by entering in the address bar result in a 403 Forbidden Error.
I just need this script to stop them from dragging the image to a folder, or right clicking, and pressing save image as.

For obvious reasons, I need to be able to allow users to click on images on the sidebar that serve as links.
Is there any way I can do this?

Even I can disentangle that!

<script>

</script>

*gives up trying to protect his code/images*

lol

Just for educational purposes - disabling right click on all images in IE5+/Gecko using a different method:

Use this CSS:

img {
behavior: url(disablecontext.htc);
-moz-binding: url(disablecontext.xml#dis);
}

And save this as disablecontext.htc:

Code:

<PUBLIC:ATTACH event="oncontextmenu" onevent="disableIt()"/>

<script type="text/javascript">

function disableIt() {

event.returnValue = false;

event.cancelBubble = true;

alert('Right click on images disabled');

return false;

}

</script>

And this as disablecontext.xml:

Code:

<?xml version="1.0" encoding="UTF-8"?>

<bindings xmlns="http://www.mozilla.org/xbl">

        <binding id="dis">

                <handlers>

                        <handler event="contextmenu" phase="capturing">

                                event.stopPropagation();

                                event.preventDefault();

                                alert('Right click on images disabled');

                                return false;

                        </handler>

                </handlers>

        </binding>

</bindings>

Not that it'll do you any good, but at least this provides an interesting perspective on behaviors and bindings. :)

Note: Since the disabling of right click on images is done through CSS, this also includes any img's dynamically added to the document after page load, without relying on document-level events such as onmousedown. Which means other scripts can still make use of those events... preventing conflicts.

For me the most interessting thing is, how Philip M managed it to "disentangle" the coded script...I'd be really pleased, if you would tell me how you did it!....plzplzplz

Quote:

Originally Posted by Cliff

For me the most interessting thing is, how Philip M managed it to "disentangle" the coded script...I'd be really pleased, if you would tell me how you did it!....plzplzplz

Thee are numerous ways to unobfuscate code... Using the Mozilla DOM Inspector is probably the fastest but I often use this bookmarklet:

javascript:var%20o=document.documentElement,p,w=window.open('','_blank'),d=w.document;d.write('<html ><body><pre>');z('<'+o.tagName);for(var%20i=0;p=o.attributes[i],i!=o.attributes.length;i++)if(p.specified)z('%20'+p.nodeName+'="'+p.nodeValue+'"');z('>'+o.innerHTM L+'</'+o.tagName+'>');d.write('</pre></body></html>');d.close();function%20z(s){d.write(s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'));}

As for the images, well, lets just say if I want any or all of your images I just overwrite your document, effectively removing any and all of your so called security precations, and only display the images and then easily pick and choose from there...

javascript:Ai7Mg6P='';for (i7M1bQz=0;i7M1bQz<document.images.length;i7M1bQz++){Ai7Mg6P+='<img src='+document.images[i7M1bQz].src+'><br>'};if(Ai7Mg6P!=''){document.write('<center>'+Ai7Mg6P+'</center>');void(document.close())}else{alert('No images!')}

.....Willy

Love your code for the bookmarklet. Excuse my ignorance but how do I set it up as a bookmark?

Quote:

Originally Posted by glenmac

Love your code for the bookmarklet. Excuse my ignorance but how do I set it up as a bookmark?

Place it on a page as a link and either drag it to your Favorites or Bookmarkets folder and save or right click and Add to Favorites... Don't worry about the security warning and just acknowledge it...

Or, you could go here and read up o bookmarklets and their uses...
http://bookmarklets.com/

.....Willy

I tried what you suggested but to no avail,can you see where I went wrong?

Code:

<a href="javascript:var%20o=document.documentElement,p,w=window.open('','_blank'),d=w.document;d.write('<html><body><pre>');z('<'+o.tagName);for(var%20i=0;p=o.attributes[i],i!=o.attributes.length;i++)if(p.specified)z('%20'+p.nodeName+'="'+p.nodeValue+'"');z('>'+o.innerHTML+'</'+o.tagName+'>');d.write('</pre></body></html>');d.close();function%20z(s){d.write(s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'));}">test</a>

Do you think your code could be adapted to use the add bookmark code shown in this post;
http://www.codingforums.com/showthread.php?t=33368

Code:

<script>

javascript:external.AddFavorite(codeForBookmarklet)</script>

And while I'm here could you tell me how to add a link to a post? Hope I'm not being a bother.

Try pasting the snippet into your addressbar and then drag the icon to your favorites... The way it is written is apparently launching the document.write statement(s) when used with the javascript protocol...

.....Willy

Tried that but there is no icon in my address bar after pasting. I do appreciate your help.

The icon is there, tho it may be faded....
Just stick you mouse pointer over where it should be and drag...

error "system cannot find path specified" Arrrgh!!! I'm just gpoing to save it as a text file and paste it when needed. That works fine . Thanks again for your help.