<pedrocorreia.net ⁄>
corner
<mySearch ⁄> <mySearch ⁄>

corner
 
corner
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

corner
 
corner
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


Download
corner
 
corner
<myBlog show="last" ⁄> <myBlog show="last" ⁄>

corner
 
corner
<myNews show="rand" ⁄> <myNews show="rand" ⁄>

corner
 
corner
<myNews type="cat" ⁄> <myNews type="cat" ⁄>

corner
 
corner
<myQuote order="random" ⁄> <myQuote order="random" ⁄>

Os milagres não acontecem em contradição com a natureza, mas só em contradição com o que sabemos da natureza
corner
 
corner
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

<pedrocorreia.net ⁄>
corner
 
corner
<myAdSense ⁄> <myAdSense ⁄>

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
<php ⁄><asp.net ⁄><vb.net ⁄><csharp ⁄><actionscript ⁄><sql ⁄>

<javascript ⁄><vb6 ⁄><vba ⁄><xml ⁄><css ⁄><asp ⁄>

 

<Flash and Image Protect ⁄ >




clicks: 6065 6065 2008-08-19 2008-08-19 goto mySnippets mySnippets css  Download  Bookmark This Bookmark This



There are many ways to protect our website content... but also, almost all of them fail!

I won't give a fully 100% working sample, this is just like those site who disable mouse right-click, you can easily disable JavaScript, or in a ultimate case, just view the source and copy that image or flash url and voilá, you got yourself what you wanted; or even by using firebug or an utility that downloads your content; etc, etc.

Btu well, of course that not all the users know these tricks :)


I won't focus on JavaScript (although this snippet has some JavaScript functions, but it's just basically to load a swf). I'll try to exemplify but only using CSS positioning, but as I already said, if someone wants to, he will get your content, but you can think in other way, if you don't want your visitor wants to grab your image, why putting it online? ^_^''
If it's an image you could, for example, use a watermark.


I'll give two fairly simple examples: block a flash-video and an image.



I'll use a YouTube Video, as you know if you click on a YouTube video you'll be redirected to YouTube's main site.
Now let's imagine that for some reason you don't want that your visitor leaves your site by clicking on the video.
In this example we'll only be able to click on the player controls bar, this is, Play, Pause, Navigation Timeline, you can let your user to Play or Stop the video, but if you don't want that also, you'll only have to tweak a CSS setting.
You can also see this as an example to overlap a flash element.

Only a small detail, in order to work with flash objects we'll have to activate this option wmode="transparent"


To flash objects I'll use SwfObject v2.1, but it's compatible with and other versions, and you can also use html tag <object>.



Basically we'll just use the famous pixel.gif/ spacer.gif and CSS positioning.



Please note that I'm not encouraging you to do this, YouTube fellows will hardly like this one, this is only for education purposes, use it as your own responsibility.


The other example will be an image. In this case you'll regularly find that one option is to put the image in a background, however I'll try to show a different approach.





Talking about what matters, code.

As I already said I'll use SwfObject and with that I'll create some JavaScript functions, which will allow us to have Unobtrusive JavaScript, but of course this is not necessary.




Events.js - this file's responsible for events management, that is, our page has elements and those elements will react to events/ triggers, with this class we'll be able to add or remove events, such as onchange, onload, etc, etc.
  1. /**
  2. * Static Class Events
  3. * Manage Events
  4. */
  5. Events = function(){}
  6.  
  7. /**
  8. * Add Event
  9. *
  10. * Full credits to (I just made a few mods):
  11. * http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
  12. *
  13. * @param Object
  14. * @param Object
  15. * @param Object
  16. */
  17. Events.AddEvent = function(obj, type, fn){
  18.   if(!obj) return;
  19.  
  20.   this.RemoveEvent(obj, type, fn);
  21.   if (obj.addEventListener) {
  22.     obj.addEventListener(type, fn, false);
  23.   }
  24.   else {
  25.     if (obj.attachEvent) {
  26.       obj["e" + type + fn] = fn;
  27.       obj[type + fn] = function(){
  28.         obj["e" + type + fn](window.event);
  29.       }
  30.       obj.attachEvent("on" + type, obj[type + fn]);
  31.     }
  32.   }
  33. }
  34.  
  35. /**
  36. * Remove Event
  37. *
  38. * Full credits to (I just made a few mods):
  39. * http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
  40. *
  41. * @param Object
  42. * @param Object
  43. * @param Object
  44. */
  45. Events.RemoveEvent = function(obj, type, fn){
  46.   if (obj.removeEventListener) {
  47.     try{obj.removeEventListener(type, fn, false);}catch(e){}
  48.   }
  49.   else{
  50.     if (obj.detachEvent) {
  51.       obj.detachEvent("on" + type, fn);
  52.       obj[type + fn] = null;
  53.       obj["e" + type + fn] = null;
  54.     }
  55.   }
  56. }




- style.css; this more important classes in here are div.youtube_click_video_blocker and div.image_blocker, here you will define your protecting div dimensions so that suits your content.
  1. div.container_protector{}
  2.  
  3. div.youtube_click_video_blocker{
  4.   position: absolute;
  5.   width: 425px;
  6.   height: 312px;
  7. }
  8.  
  9. div.image_blocker{
  10.   position: absolute;
  11.   width: 450px;
  12.   height: 350px;
  13. }
  14.  
  15. img.prevent_click{
  16.   width: 100%;
  17.   height: 100%;
  18. }








Init.js - this is where initially events will be triggered. We'll create a SwfObject with our YouTube video settings and add the wmode="transparent" parameter as I said earlier.
  1. /**
  2. * Startup function
  3. *
  4. * @author pedrocorreia.net
  5. */
  6. Init = function (){
  7.   var defs = {
  8.     id: "my_protected_movie",
  9.     url: "http://www.youtube.com/v/XKOwGffqlbM",
  10.     placeholder: "my_placeholder",
  11.     width: 425,
  12.     height: 335,
  13.     ver: "7.0.0"
  14.   }
  15.  
  16.   //we have to add the parameter wmode="transparent"
  17.   //in order to work
  18.   var params = {};
  19.   params.wmode="transparent";
  20.  
  21.   swfobject.embedSWF(defs.url,defs.placeholder,defs.width,defs.height,defs.ver,"_js_/expressInstall.swf","",params);
  22. }
  23.  
  24. Events.AddEvent(window, "load", Init);
  25.  




- index.htm; this is just an example. In here we're protecting two things: a YouTube video and a regular image.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.   <title>Flash and Image Protect</title>
  6.   <link href="_css_/style.css" rel="stylesheet" type="text/css" />
  7.   <script type="text/javascript" src="_js_/swfobject.js"></script>
  8.   <script type="text/javascript" src="_js_/Events.js"></script>
  9.   <script type="text/javascript" src="_js_/Init.js"></script>
  10. </head>
  11. <body>
  12.   <!-- protect_a_Youtube_video -->
  13.   <div class="container_protector">
  14.     <!-- div_blocker -->
  15.     <div class="youtube_click_video_blocker">
  16.       <img src="spacer.gif" class="prevent_click" alt="no_click_please" title="no_click_please" />
  17.     </div>
  18.     <!-- div_blocker/ -->
  19.  
  20.     <!-- content_to_protect -->
  21.     <div id="my_placeholder">Alternative Content if Flash version's not available</div>
  22.     <!-- content_to_protect/ -->
  23.   </div>
  24.   <!-- protect_a_Youtube_video/ -->
  25.  
  26.   <br/>
  27.  
  28.   <!-- protect_a_regular_image -->
  29.   <div class="container_protector">
  30.     <!-- div_blocker -->
  31.     <div class="image_blocker">
  32.       <img src="spacer.gif" class="prevent_click" alt="no_click_please" title="no_click_please" />
  33.     </div>
  34.     <!-- div_blocker/ -->
  35.  
  36.     <!-- content_to_protect -->
  37.     <img src="protect_image.jpg" width="450" height="350" alt="Protected Image" title="Protected Image" />
  38.     <!-- content_to_protect/ -->
  39.   </div>
  40.   <!-- protect_a_regular_image/ -->
  41.  
  42. </body>
  43. </html>





If you have any doubt or found any error, please drop me an email









clicks: 6065 6065 2008-08-19 2008-08-19 goto mySnippets mySnippets css  Download  Bookmark This Bookmark This