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;
div#youtube_video{
width: 425px;
height: 355px;
}
div#youtube_video div#youtube_video_blocker{
position: absolute;
width: 425px;
height: 318px;
}
div#youtube_video div#youtube_video_blocker img#youtube_img_blocker{
width: 100%;
height: 100%;
}
-
index.htm;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Youtube VideoClick-Blocker</title>
<link href="style.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div id="youtube_video">
<div id="youtube_video_blocker">
<img src="spacer.gif" id="youtube_img_blocker" alt="no_click_please" title="no_click_please" />
</div>
<div id="youtube_video_content">
<script type="text/javascript">
var so = new SWFObject("http://www.youtube.com/v/XKOwGffqlbM", "mymovie", "425", "355", "7");
so.addParam("wmode", "transparent");
so.write("youtube_video_content");
</script>
</div>
</div>
</body>
</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!