Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts

    click image hotspot to copy text to clipboard

    I have a small snippet of code which will copy the contents of a textbox to the clipboard when a small image, say a button, is clicked.

    I want to achieve a similar effect when I click a hotspot on an image, but in this case the text will have to come from...well, I don't know. Maybe the title in an area tag?

    This is what I have so far for a textbox:

    Code:
    //clipboard copy
    function ClipBoard(what){
    Copied = document.getElementById(what).createTextRange();
    Copied.execCommand("Copy");
    alert ("Information copied to the clipboard. Use CTRL-V to paste."); 
    }
    
    <textarea id="holdtext1"></textarea> <img border="0" src="copyclick.gif" onclick="ClipBoard('holdtext1');" alt=" Click to copy text to clipboard / CTRL-V to paste" style="cursor: hand" width="18" height="18">
    Does anyone have any ideas?
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts
    interesting. I haven't played around with execCommand that much (IE-only commands are kind of useless IMO), but it seems that one way is to pass the string with the onclick to the function, copy THAT text to a hidden textarea and then copy it FROM the textarea to the clipboard. There could easily a better way, though...

    Code:
    <body>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Points_of_a_horse.jpg/800px-Points_of_a_horse.jpg" width="145" height="126" alt="horse" usemap="#horsemap" />
    <map name="horsemap">
      <area shape="rect" coords="0,0,82,126" href="#" onclick="ClipBoard('some text'); return false"/>
      <area shape="circle" coords="90,58,3" href="#" onclick="ClipBoard('some other text'); return false"/>
      <area shape="circle" coords="124,58,8" href="#" onclick="ClipBoard('even more text'); return false"/>
    </map> 
    <textarea id="holdtext" style="display:none"></textarea>
    <script type="text/javascript">
    //clipboard copy
    function ClipBoard(what){
    document.getElementById("holdtext").value = what;
    Copied = holdtext.createTextRange();
    Copied.execCommand("Copy");
    alert ("Information copied to the clipboard. Use CTRL-V to paste."); 
    }
    </script > 
    </body>

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts
    Yes, that works - thanks - but as you say, only for IE.

    There's some clever code called zeroclipboard which comes close to doing the same thing crossbrowser...

    http://code.google.com/p/zeroclipboa...i/Instructions

    ...but there doesn't seem any way to get it to work on hotspots because the element is the entire image.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,620
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by tpeck View Post
    There's some clever code called zeroclipboard which comes close to doing the same thing crossbrowser...
    It actually requires Flash and so will not work for anyone who either doesn't have a recent enough version of Flash installed or who doesn't allow Flash to play automatically. Presumably it would also fail to work for anyone who has Flash configured to disallow access to the clipboard - since Flash shouldn't need that access and allowing it introduces all sorts of security issues.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts
    The boffins at Stardock don't seem to think it's an issue - they do the very same thing when you download serial numbers from your account with them. Why the fear? Should we tell them they are risking WW3 with (shudder) flash?

    http://aapress.com.au/demo/stardockflash.gif
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,620
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by tpeck View Post
    The boffins at Stardock don't seem to think it's an issue - they do the very same thing when you download serial numbers from your account with them. Why the fear? Should we tell them they are risking WW3 with (shudder) flash?

    I was just pointing out that those who do consider it to be a security issue or who do not have flash would still be unable to use it. Also that malicious sites could offer it as a way to possibly get their viruses onto your system.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •