<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" ⁄>

No one ever died for my sins in hell, as far as I can tell, at least the ones I got away with
corner
 
corner
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

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

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
 

<Youtube Video Click Blocker ⁄ >




clicks: 9755 9755 2008-06-01 2008-06-01 goto mySnippets mySnippets css  Download  Bookmark This Bookmark This



Bem, o titulo do snippet é mais um titulo pomposo que outra coisa :-D, visto que a finalidade é somente tentar demonstrar uma possivel maneira de sobrepor uma imagem sobre um objecto flash.

Finalidade disto? Humm, bem, é capaz de haver alguma, somewhere, sometime, talvez alguém queira utilizar para por ex. proteger o click sobre um swf, tal como o youtube.



Neste exemplo apenas é "bloqueado" o click no video (como sabem ao clicarmos na zona do video somos reencaminhados para a página do youtube onde podemos visualizar o mesmo video, bem como aceder a outros), ou seja a zona dos controlos (play e barra do tempo) funcionam correctamente, porém a parte do volume deixa de ser acedivel, visto que a barra de volume expande-se para cima, o que vai incidir sobre a área "protegida", de qualquer das formas cá fica o exemplo.


Utilizei o SwfObject v1.5, mas é compativel com qualquer outra versão, bem como podemos usar a tag <object>.

Só existe um pequeno pormenor, teremos de activar a opção wmode=transparent



Basicamente o truque é usar o célebre pixel.gif/spacer.gif e o posicionamento no CSS.



Como disse de inicio só usei o exemplo do youtube para mostrar algo prático, visto que poderá ser usado noutro tipo de situações, nem encorajo alguém a fazer isto com os videos do youtube ^_^''



- style.css;
  1. div#youtube_video{
  2. width: 425px;
  3. height: 355px;
  4. }
  5.  
  6. div#youtube_video div#youtube_video_blocker{
  7. position: absolute;
  8. width: 425px;
  9. height: 318px;
  10. }
  11.  
  12. div#youtube_video div#youtube_video_blocker img#youtube_img_blocker{
  13. width: 100%;
  14. height: 100%;
  15. }



- index.htm;
  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>Youtube VideoClick-Blocker</title>
  6. <link href="style.css" rel="Stylesheet" type="text/css" />
  7. <script type="text/javascript" src="swfobject.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div id="youtube_video">
  12.  
  13. <div id="youtube_video_blocker">
  14. <img src="spacer.gif" id="youtube_img_blocker" alt="no_click_please" title="no_click_please" />
  15. </div>
  16.  
  17. <div id="youtube_video_content">
  18. <script type="text/javascript">
  19. var so = new SWFObject("http://www.youtube.com/v/XKOwGffqlbM", "mymovie", "425", "355", "7");
  20. so.addParam("wmode", "transparent");
  21. so.write("youtube_video_content");
  22. </script>
  23. </div>
  24.  
  25. </div>
  26.  
  27. </body>
  28. </html>




nota: só consegui testar este código em plataformas Windows, não sei se funciona correctamente no MacOSX ou Linux


Qualquer erro/ dúvida é só dizer!









clicks: 9755 9755 2008-06-01 2008-06-01 goto mySnippets mySnippets css  Download  Bookmark This Bookmark This