Flash cobrindo conteúdo (solução)
Wednesday, June 20th, 2007Um problema muito comum para quem usa flash combinado com html e css, apenas para destacar alguns detalhes, é o fato de o flash cobrir o conteúdo da página por padrão. Eu particularmente enfrentei este problema várias vezes ao tentar colocar um menu drop-down que ao ser visualizado deveria cobrir o flash. Mas o menu ficava sempre escondido atrás do flash.
Para solucionar o caso eu utilizei os seguintes conceitos:
- A propriedade z-index do CSS;
- posicionamento do CSS;
- As tags object e embed;
- e o atributo wmode do vídeo.
O z-index pelo que eu tenho percerbido e lido em diversos lugares só funciona em elementos html que estejam “posicionados”, ou seja, tenham o atributo position com o valor absolute, relative ou fixed.
Portanto, colocaremos o video flash dentro de uma div e aplicaremos o seguinte css a ela:
div#flash_div{
position: relative;
z-index: 0;
}
E devemos fazer o mesmo para os objetos que queremos que sobreponham o flash.
Como existem muitas divergências na renderização entre os browsers, é necessário fazer duas chamadas ao vídeo: uma por meio da tag object(a qual é aceita pelo Internet Explorer) e por meio da tag embed(aceita pelo firefox). Ambas as tags terão os mesmos atributos. E dentre eles deve-se setar o wmode do object e do embed para transparent:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="214" height="229" id="monitor" align="">
<param name="movie" value="images/monitor.swf">
<param name="quality" value="high">
<param name=”wmode” value=”transparent”>
<embed wmode=”transparent” src=”images/monitor.swf” quality=”high” bgcolor=”#FFFFFF” width=”214″ height=”229″ name=”monitor” align=”" type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer”></embed>
</object>
Eu resolvi meu problema assim. Com apenas uma ressalva: essa solução não funciona para usuário do Linux, e não tenho conhecimento de nenhuma outra solução. Espero ter ajudado.