Web Analytics Made Easy -
StatCounter Problem with Image/Disable Click Script - CodingForum

Announcement

Collapse
No announcement yet.

Problem with Image/Disable Click Script

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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>
    Last edited by Manetheran; Jun 24, 2002, 01:23 PM.

  • #2
    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.
    I don't suffer from insanity, I enjoy every single minute of it!

    Comment


    • #3
      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%[email protected]%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?

      Comment


      • #4
        Even I can disentangle that!

        <script>
        <!--
        document.write(unescape("<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional// EN"><HTML LANG="EN">
        <HEAD%
        3E<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <META HTTP- EQUIV="imagetoolbar" CONTENT="no">

        <LINK REL="SHORTCUT ICON" HREF
        ="/favicon. ico">
        <link REL="Stylesheet"
        href="/stylesheet.css" type="text/ css">
        <meta name="description"%
        20content="Homepage for Bearfoot Technol
        ogies, a software programming company,
        currently working on a RPG/RTS game. ">
        <meta name="keywords" cont
        ent="software, bearfoot technolgies,%2
        0rpg, game, company, dellenmoor, s
        oftware developement, graphics, texture%
        20artists, 3d modelers, computer progr
        ammers">
        <meta name="author"
        content="[email protected] -Web Design- ">
        <meta name="Generator" con
        tent="Microsoft Wordpad">
        <meta%2
        0name="Robots" content="="INDEX,
        FOLLOW,NOARCHIVE">
        <META NAME="
        MS.LOCALE" CONTENT="EN- US">
        <META NAME="CATEGORY" CO
        NTENT="Software Development">
        <TI
        TLE>Bearfoot Technologies Software Develop
        ement</TITLE>
        </ HEAD><BODY>
        <table align="cente
        r" width="100%" cellspacing="0%2
        2 cellpadding="8" border="0">


        "));
        //-->
        </script>

        All the code given in this post has been tested and is intended to address the question asked.
        Unless stated otherwise it is not just a demonstration.

        Comment


        • #5
          *gives up trying to protect his code/images*

          lol

          Comment


          • #6
            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.
            jasonkarldavis.com

            Comment


            • #7
              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

              Comment


              • #8
                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,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'));}

                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

                Comment


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

                  Comment


                  • #10
                    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...
                    Bookmarklets - Free tools for power surfing!; Tiny tools you keep like bookmarks for better surfing and searching. Work for Windows, Macintosh, Unix, on Netscape or Explorer. Each tool is a small JavaScript application which you can bookmark directly from the page and use from your Bookmarks or Favorites menu.


                    .....Willy

                    Comment


                    • #11
                      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.codingforum.net/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.
                      Last edited by glenmac; Jan 28, 2005, 04:00 PM.
                      lantzvillecomputers.com

                      Comment


                      • #12
                        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

                        Comment


                        • #13
                          Tried that but there is no icon in my address bar after pasting. I do appreciate your help.
                          lantzvillecomputers.com

                          Comment


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

                            Comment


                            • #15
                              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.
                              Last edited by glenmac; Jan 28, 2005, 04:19 PM.
                              lantzvillecomputers.com

                              Comment

                              Working...
                              X