2008-11-18 2 views
1

Я хочу встроить swf поверх html-страницы, например, панель плавающего просмотра видео. У меня уже есть swf-файл, который автоматически отрегулирует его размер в соответствии с размером браузера, а swf-файл будет частично прозрачным. Я думал, что могу просто добавить тег div, сделать положение абсолютным и изменить z-index больше, но это не работает, потому что swf просто заменил все, что находится на странице.Как вставить swf поверх html-страницы?

Вот что я сделал

<script> 
     swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0"); 
</script> 

<body bgcolor="#000000"> 
     <div id="header"></div> 
     <div id="shell"> 
      things in my html 
     </div> 
</body> 

#header { 
    position:absolute; 
    z-index:100; 

} 

Любая идея? Благодарю.

ответ

5

После того, как вы получите ваши проклейки, чтобы работать должным образом вам нужно будет установить WMODE к прозрачной, чтобы быть в состоянии увидеть, что за вспышкой, если вы этого не сделаете это фон будет непрозрачным.

Это быстрый CopyPaste от swfobject docs, но он должен получить точку в поперечнике:

<script type="text/javascript"> 

var flashvars = {}; 
var params = {wmode : "transparent"}; 
var attributes = {}; 

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes); 

</script> 
0

Я считаю, что проблема заключается в том, что CSS не работает с <object /> тегами. swfobject.embedSWF превращает <div id="header"></div> в тег <object /> с кучей атрибутов, которые могут влиять на CSS. Если вы создаете обертку DIV вокруг заголовка DIV и применяете CSS к обертке DIV, все работает лучше. Вы также должны добавить 100% ширину и высоту в CSS. Вот пересмотренный источник:

<script> 
    swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0"); 
</script> 

<body bgcolor="#000000"> 
    <div id="wrapper"> 
     <div id="header"></div> 
     </div> 
    <div id="shell"> 
     things in my html 
    </div> 
</body> 

#wrapper { 
    position:absolute; 
    z-index:100; 
    width:100%; 
    height:100%; 
} 
+0

это все еще не работает правильно, после того, как я добавить обертку, это сократит страницу до половины, половина является swf и половина - это html. также, если я добавляю ширину: 100% и высота: 100%, все мои кнопки отключены ... – shibbydoo 2008-11-18 22:20:56

Смежные вопросы